为什么 Vue 的“v-for”元素的这种应用在 Laravel 中不起作用？答案

【问题标题】：Why does this application of Vue's "v-for" element not work in Laravel?为什么 Vue 的“v-for”元素的这种应用在 Laravel 中不起作用？
【发布时间】：2021-01-14 15:56:04
【问题描述】：

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

如果你对在 Laravel 中使用 Vue 有任何见解，如果你能帮助我回答这个问题，我将不胜感激。把我难住了！我在下面插入了代码以仔细查看。

这是与问题相关的 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>

【问题讨论】：

欢迎来到 SO .. 你遇到什么错误 .?
感谢您的欢迎！这是错误：
"属性或方法 "plans" 未在实例上定义，但在渲染期间被引用。通过初始化属性”

标签： laravel vue.js vue-component v-for

【解决方案1】：

你应该给计划组件属性，比如

<plan :plans="plans" ...

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

props: { plans: Array }

【讨论】：