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

Question

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!

Hope this works.

Parent Component

<template>
  <ul>
    <VideoListItem v-for="video in videos" v-bind:key="video.title" v-bind:video="video"></VideoListItem>
  </ul>
</template>

<script>
import VideoListItem from "./VideoListItem";

export default {
  name: "VideoList",
  components: { VideoListItem },
  props: ["videos"]
};
</script>

Child Component

<template>
  <li>{{ video.snippet.title}}</li>
</template>

<script>
export default {
  name: "VideoListItem",
  props: ["video"]
};
</script>

<style scoped>
</style>

======================================================

Listen => when ever you provide v-for property we need to provide v-key property. IT ENHANCES THE PERFOMANCE OF RERENDER OUR LIST OF ITEM.

<li class="list-group-item" v-for="server in Servers" v-bind:key="server">    

Specify the unique key in the tag like this.