Vueコンポーネントの使用 - setattr - 無効な属性名

Question

私はVue.jsの使用の初期段階にあり、コンポーネントを使用しようとすると邪魔になりました。このコードの非コンポーネント版は正常に動作しました。

以下は、解読に問題があるエラーを返しますが、オブジェクトの属性が必要などこかにカンマを渡しているようです。

ここで問題がどこで発生しているかはっきりしていますか？

エラー

がキャッチされない例外：DOMException： '要素' on 'に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要素で、カンマは内部にありません。