Vue компонент не расслоение плотной работы в файле лопастной Laravel

Question

Я новичок в vueJS и я пытаюсь реализовать свой собственный компонент в моем файле .blade.php Laravel, но это не работает Мой код, как этот

Vue.component('todo-item', { 
     props: ['todo'], 
     template: '<li>{{ todo.text }}</li>' 
    }) 
    var app7 = new Vue({ 
     el: '#app-7', 
     data: { 
      groceryList: [ 
       {text: 'Vegetables'}, 
       {text: 'Cheese'}, 
       {text: 'Whatever else humans are supposed to eat'} 
      ] 
     } 
    }) 

---

<div id="app-7"> 
<ol> 
    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item> 
</ol> 

я есть добавить этот же код в файл .html, то он работает

Answer 1

добавить @ до символа @ {{todo.text}}, потому что если вы не дать «@», то это рассчитывать как Laravel переменной

Answer 2

I г УЭСС ваш получать сообщение об ошибке, как этот

Use of undefined constant todo - assumed 'todo' 

это означает, что шаблон лопатка двигателя вперемешку с VUE JS TEMPLATE

{{ todo.text }} 

лезвие рассматривает это как его код, но не существует какая-либо переменная TODO там

Как исправить это:

Оберните свой javascript-код в файл .js и убедитесь, что вы загрузили его только в нижней части вашего файла клинка.