将数据从控制器带到 vue.js 的正确方法是什么？ Laravel-vue.js答案

【问题标题】：What is the correct way to bring data from the controller to the vue.js? Laravel-vue.js将数据从控制器带到 vue.js 的正确方法是什么？ Laravel-vue.js
【发布时间】：2019-11-22 15:46:12
【问题描述】：

我以前没有真正使用过这种方法，我很困惑我哪里出错了。

我在控制器中设置了数据，我添加了 mycourses 条目但它没有通过，其他一切都很好

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

return view('home', $data);

在这之后我去刀片并添加这个

<script>
    const user = {!! json_encode($user) !!};
    const mycourses = {!! json_encode($mycourses) !!};
    const courses = {!! json_encode($courses) !!};
    const locations = {!! json_encode($locations) !!};
</script>

然后这是 .js，但发生的事情是它调用了 vue

在 vue 文件中，我将它添加到 data()

courses: [],
mycourses: [],
locations: [],

在 vue 文件中，我将其添加到挂载中

this.courses = courses;
this.mycourses = mycourses;
this.locations = locations;

mycourses 给了我这个错误

挂载钩子错误：“ReferenceError: mycourses 未定义”

ReferenceError: mycourses 未定义

我在之前添加了所有其他课程之后添加了我的课程，我的所有课程都与课程相同，但我仍然收到此错误。我错过了什么？

【问题讨论】：

你只返回$data，你没有返回$mycourses。你试过像 const mycourses = {!! json_encode($data['mycourses']) !!}; ?
您是否将数据数组传递给 vue 组件？你可以选择作为道具传递吗？
@hurnhu 这不起作用
@Damon 我不确定，我从来没有这样做过，奇怪的是其他东西都在这样做

标签： laravel vue.js

【解决方案1】：

我不确定这是否会有所帮助，这意味着考虑到您的情况，这种方法可能不起作用。

我发现这种设置/传递数据的方法非常有用。在刀片模板（或任何需要的地方）中解析的开销更少。

控制器

public function myFunction() {
    ...

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

    // Verify the data is correct.
    // dd($courses);

    return view('example', compact('user', 'courses', 'mycourses', 'locations');
}

您可以通过使用dd() 检查每个返回的值来验证每个返回的值。

如果您有要向其传递数据的 vue 组件，该组件存在于刀片模板中，您可以对 pass the data in as props 执行类似的操作

example.blade.php

<p>Example content...</p>
<p>Hello, {{ $user->name }}</p>
<example-component :courses="courses" :mycourses="mycourses"></example-component>
<p>...</p>

现在我们已将courses 和mycourses 传递给视图组件。您可以在那里访问它们：

<script>
    export default {
        name: 'ExampleComponet',
        data() {
            return {
                //
            }
        },
        methods: {
            //
        },
        props: {
            courses: {
                type: Object,
                required: true
            },
            mycourses: {
                type: Object, 
                required: true
            },
        },
    }
</script>

您需要为传入的每个道具更新属性type。也许courses 不是一个对象，而是一个字符串。

我不确定我是否确实解决了您的问题，但希望这能帮助您找到正确的方向。

【讨论】：