使用Vue组件 - setattr - 无效的属性名称

Question

我处于使用Vue.js的早期阶段,并且在尝试使用组件时已经失败了.此代码的非组件版本工作正常.

以下返回一个错误,我在解密时遇到问题,但看起来我正在某个应该有对象属性的地方传递一个逗号.

是否清楚这里出现了什么问题？

错误

未捕获的DOMException:无法在'Element'上执行'setAttribute':','不是有效的属性名称.

HTML

<div id="list_render">
    <ol>
        <todo-item
            v-for="item in todo_list",
            v-bind:todo="item",
            v-bind:key="item.id">
        </todo-item>
    </ol>
</div>

JS

Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
})

var todo = new Vue({
    el: '#list_render',
    data: {
        todo_list: [
            { id: 0, text: 'Learn Vue' },
            { id: 1, text: 'Plan project' }
        ]
    }
})

Answer 1

在这里删除逗号:

<todo-item
  v-for="item in todo_list"
  v-bind:todo="item"
  v-bind:key="item.id">

它应该看起来像一个普通的HTML元素,里面没有逗号.