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

我猜你得到的错误就像这样

Use of undefined constant todo - assumed 'todo'

这意味着刀片模板引擎与vue js模板混合

{{ todo.text }}

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

如何解决这个问题：

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

Answer 2

在@ {{todo.text}}之前添加@，因为如果你不给“@”那么它就算作为laravel变量

Vue js组件在laravel刀片文件

2 个答案: