Using Vue components - setattr - invalid attribute name

Question

I am in the early stages of using Vue.js, and have come unstuck when attempting to use components. The non component version of this code worked fine.

The following returns an error, which I am having trouble deciphering, but it looks like I am passing a comma somewhere where there should be an attribute of the object.

Is it clear where the issue is arising here?

Error

Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': ',' is not a valid attribute name.

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

Remove commas here:

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

It should look like a regular HTML element, with no commas inside.

Answer 2

In extension to previous answer

error:      <input v-model="text"  ,  type="text"/>
works:      <input v-model="text"     type="text"/>