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 }}

blade 认为这是它的代码，但那里没有任何 todo 变量

如何解决这个问题：

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