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' }
        ]
    }
})

Egor Stambakio · Accepted Answer · 2017-05-19 21:25:45Z

25

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.

answered May 19, 2017 at 21:25

Egor Stambakio

18.2k5 gold badges37 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

moshe beeri · Accepted Answer · 2021-12-17 20:44:06Z

1

In extension to previous answer

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

answered Dec 17, 2021 at 20:44

moshe beeri

2,0372 gold badges17 silver badges25 bronze badges

Collectives™ on Stack Overflow

Using Vue components - setattr - invalid attribute name

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related