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

Vue.js 2.5 / Visual Studio Code editor

I am getting this es-lint warning, how can I get rid of it ?

<template :slot="slotName" slot-scope="props" v-for="slotName in  $scopedSlots?Object.keys($scopedSlots):null">
    <slot :name="slotName" :row-data="props.rowData" :row-index="props.rowIndex" :row-field="props.rowField"></slot>
</template>

I tried to add an index, but it does not solve this issue

<template :slot="slotName" slot-scope="props" v-for="(slotName, index) in  $scopedSlots?Object.keys($scopedSlots):null" :key="index">
    <slot :name="slotName" :row-data="props.rowData" :row-index="props.rowIndex" :row-field="props.rowField"></slot>
</template>

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.

Suppose you are iterating over an array named users, then you can do something like this:

<div v-for="(user,id) in users" :key="id" >
      <div class="card" >
       ...........................
      </div>
</div>

this work for me

<div :class="sliderClass()" v-for="(slide,index) in slides" :key="index">
<div :class="sliderClass()" v-for="slide in slides" :key="slide.SliderID">

Here is the discussion in eslint-plugin-vue, which has the following workaround suggested:

"vetur.validation.template": false,

Which corresponds to this UI option:

Guess no eslint validation in html is better than incorrect validation.