Question

Vue js 组件在 laravel blade 文件中不起作用

2017-02-20

4087

laravel-5 vue.js

我是 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 变量

Yashvantsinh Zala

2017-02-28

Answer 2

我猜你会得到这样的错误

Use of undefined constant todo - assumed 'todo'

这意味着 blade 模板引擎与 vue js 模板混合在一起

{{ todo.text }}

blade 将此视为它的代码，但那里没有任何 todo 变量

如何解决这个问题：

将你的 javascript 代码包装到 .js 文件中，并确保你在 blade 文件的底部加载它。