vue-language-server : Elements in iteration expect to have 'v-bind:key' directives

The question is well answered, but I would like to add an example and a link to the docs:

This structure causes the said error:

<div v-for="(item, index) in items">
    {{index}}. {{item.name}}
</div>

You can fix it by changing the syntax like this:

<div v-for="(item, index) in items" :key="item.id">
    {{index}}. {{item.name}}
</div>

If your items do not have any unique id field you can just write :key="item". However, for performance reasons your data should have an id field.

https://vuejs.org/v2/guide/list.html#key


You can safely ignore that warning. It comes from the eslint plugin for vue and it was a bug, got fixed a month ago but maybe vetur is still using the old version of the plugin.

The key attribute has to be added to the content you pass to your component


Let's look at a simple example here!

I'm building a To do List App. So I build a component called Todo and inside my TodoList component I will call Todo component like this

    <todo v-for="todo in todos" v-bind:key="todo" v-bind:todo="todo"></todo>

Hope it helps!