为什么在Laravel中无法使用Vue的“ v-for”元素？

问题描述

我正在尝试使用Vue的智能“ v-for”元素遍历数组。但是，与Laravel结合使用，这是行不通的。无论我做什么，都不会显示所需的内容，并且我会继续在控制台中收到此错误：“属性或方法“计划”未在实例上定义，但在渲染期间被引用。请确保此属性是可响应的，通过初始化属性，可以在数据选项中，也可以在基于类的组件中使用。”

如果您对将Vue与Laravel结合使用有任何见解，如果您帮助我回答了这个问题，我将非常感谢。让我感到难过！我在下面插入了代码，以进行仔细研究。

以下是与该问题相关的site.js：

Vue.component('plan',{
template: '#plan-template',props: {
    name: {
        type: String,required: true
    }
},

}）

new Vue({
el: '#app',data: {
    plans: [
        'The Single','The Hacker','The Teacher','The CurIoUs'
    ]
}

}）

以下是与该问题相关的HTML标记：

<plan v-for="plan in plans" v-bind:name="name"></plan>

解决方法

您应该计划诸如

<plan :plans="plans" ...

计划组件必须像...一样接收它们

props: { plans: Array }