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!