Laravel 向 vue 组件传递数据

Posted

技术标签:

【中文标题】Laravel 向 vue 组件传递数据【英文标题】:Laravel pass data to vue component 【发布时间】:2020-12-21 10:14:03 【问题描述】:

我将 laravel 中的数据传递到我的 vue 组件中,以便能够使用 VueJS,但是在我的每个语句中,循环在第一组数据之后结束并且不显示所有内容。

 <div>
            <v-card-title>course</v-card-title>
            <v-card-subtitle>school</v-card-subtitle>
</div>

<script>
export default 
    name:"InputForm",
    props: ['course', 'courseGroup', 'school'],

</script>

这是我用来向 vue 传递数据的刀片代码

@foreach ($modules as $module)
<input-form  
            :course="'$module->Course'" 
            :school="'$module->School'"
/>
@endforeach

【问题讨论】:

【参考方案1】:

使用json_encode()函数向vuejs发送数据

@foreach ($modules as $module)
<input-form  
            :course="!! $module->Course !!" 
            :school="!! $module->School !!"
/>
@endforeach

【讨论】:

数据是用另一种方式发送的,只是第一组没有显示所有数据 没听懂你能不能详细解释一下 所以在数据库中,我有两个课程和学校条目。 foreach 旨在遍历每个条目并将其传递给 vue。但是在这种情况下它只通过第一个条目,因为 vue 只显示第一个 couse 和学校的名称。 我的意思是如果我在刀片文件中手动执行它就可以工作,但只有当我将它传递给 vue 组件时它才会中断 循环中断或组件内有数据。?

以上是关于Laravel 向 vue 组件传递数据的主要内容,如果未能解决你的问题,请参考以下文章

将数据从 Laravel 传递到 Vue 组件的最佳实践

如何将数据从 vue 组件传递到 laravel 中的视图(HTML)

无法将数据从刀片传递到 vue(Laravel 5.3)

Vue子组件向父组件传递数据

如何将分页数据和数组从控制器 laravel 传递到 vue 组件?

vue组件-子组件向父组件传递数据-自定义事件