Passing data from Laravel to vue

Question

I'm trying to pass an array from the laravel controller to my vue component, there is data already being passed successfully but i'm trying to send another one and this new one isn't working.

This is the controller function, if I dd($data); the correct data is shown.

$data['user'] = Auth::user()->load('userType');
$data['courses'] = Course::all();
$data['myClasses'] = StudentSchedule::where('instructor_id',Auth::user()->id)
    ->with('course', 'package.packageCourses', 'user', 'location')->get();

$data['locations'] = Location::all();
$data['notification'] = Notification::where('instructor_id', Auth::user()->id)
    ->with('student','instructor','location','course')->get();
if (Auth::user()->rankings()->count() > 0) {
    $data['user']->ranking = Auth::user()->rankings()->avg('ranking');
} else {
    $data['user']->ranking = 5;
}

return view('home', $data);

This is my blade

@extends('layouts.app')

@section('styles')
    @parent
    <link href="{{ asset('css/views/users/show.css') }}" rel="stylesheet">
@endsection

@section('content')
    <user-show></user-show>
@endsection
@section('scripts')
    <script>
        const user = {!! json_encode($user) !!};
        const courses = {!! json_encode($courses) !!};
        const myClasses = {!! json_encode($myClasses) !!};
        const locations = {!! json_encode($locations) !!};
    </script>
    <script src="{{ asset('js/users/show.js') }}"></script>
@endsection

This is the vue where I'm trying to get the data I set this is the data()

courses: [],
myClasses: [],
locations: [],
notification: [],

In the mounted

this.courses = courses;
this.myClasses = myClasses;
this.locations = locations;
this.notification = notification;

The errors I get are this, are on the this.myClasses = myClasses line in the mounted

Error in mounted hook: "ReferenceError: myClasses is not defined"

ReferenceError: myClasses is not defined

I don't understand why the myClasses doesn't work, while all the others do.

What am I doing wrong?

What view is being returned when you get that error? If you're loading vue.js after initializing the variables in each view, I'd imagine there are a few cases where you're not likely initializing the same variables. — Tim Lewis
– Tim Lewis, Commented Nov 28, 2019 at 16:12
omg I'm an idiot, it's returning the home view which then returns another view depending on the user_type_id, that's where I also needed to add the const myClasses = {!! json_encode($myClasses) !!}; ugh, working with this system is so confusing, I usually work with interia-vue that does all this for me without the need for blade or js files, only vue. This is an old project that I'm required to finish for work, thanks for your help! — Nancy
– Nancy, Commented Nov 28, 2019 at 16:16
Is there a reason you're not passing the variables as props? — Rwd
– Rwd, Commented Nov 28, 2019 at 16:18
You're not an idiot :) View inheritance/extending can be a rabbit hole to navigate sometimes, glad I was able to point you in the right direction. If you want to add that a self-answer, then go ahead. And you may accept it when the system allows to properly close this question. Cheers! — Tim Lewis
– Tim Lewis, Commented Nov 28, 2019 at 16:18

Nancy · Accepted Answer · 2019-11-28 16:24:58Z

1

The reason this wasn't working was because I am returning the home view in the controller, however in the home view the user is redirected again depending on the user_type_id and I was only setting this

const myClasses = {!! json_encode($myClasses) !!};

in the redirected view, not in the home view as well.

So technically the code is correct if there are no redirecting views, so if you have redirecting views remember to set those in all the views and not just the final one.

answered Nov 28, 2019 at 16:24

Nancy

1,0614 gold badges27 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Passing data from Laravel to vue

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related