Блог

Я пытаюсь выполнить итерацию по массиву, используя интеллектуальный элемент Vue «v-for». Однако в сочетании с Laravel это не работает. Что бы я ни делал, желаемое содержимое не отображается, и я продолжаю получать эту ошибку в своей консоли: «Свойство или метод «планы» не определены в экземпляре, но на них ссылаются во время визуализации. Убедитесь, что это свойство является реактивным либо в опции data, либо для компонентов на основе классов, инициализировав свойство «.

Если у вас есть какое-либо представление об использовании 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 }