Verwenden von Vue-Komponenten - setattr - ungültiger Attributname

Question

Ich bin in einem frühen Stadium der Verwendung von Vue.js und habe sich beim Versuch, Komponenten zu verwenden, nicht gelöst. Die Nicht-Komponenten-Version dieses Codes funktionierte einwandfrei.

Das folgende gibt einen Fehler zurück, bei dem ich Probleme habe zu entschlüsseln, aber es sieht so aus, als ob ich irgendwo ein Komma übergebe, wo ein Attribut des Objekts sein sollte.

Ist klar, wo das Problem hier entsteht?

Fehler

Uncaught DOMException: Fehler 'setAttribute' auf 'Element' auszuführen: '' ist kein gültiger Attributnamen.

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

entfernen Kommas hier:

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

Es wie eine normale aussehen sollte HTML-Element, ohne Kommas.