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元素，里面没有逗号。

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

1 个答案: