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

Question

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>

Answer 1

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