Vue js组件不能在laravel刀片文件中工作。

Question

我是vueJS的新手，我尝试在laravel .blade.php文件中实现我的自定义组件，但是它没有像这样工作我的代码

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

我想你会犯这样的错误

Use of undefined constant todo - assumed 'todo' 

这意味着刀片模板引擎与vue js模板混在一起。

{{ todo.text }}

刀片认为这是它的代码，但是没有任何todo变量。

如何解决这个问题：

将您的javascript代码打包到一个.js文件中，并确保将其加载到刀片文件的底部。