vue-language-server ：迭代中的元素期望有 'v-bind:key' 指令

Question

Vue.js 2.5 / Visual Studio 代码编辑器

我收到这个 es-lint 警告，我该如何摆脱它？

 <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>

我试图添加一个索引，但它并没有解决这个问题

<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>

原文由 user762579 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这种结构会导致上述错误：

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

您可以通过更改如下语法来修复它：

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

如果您的商品没有任何唯一的 id 字段，您可以只写 :key="item" 。但是，出于性能原因，您的数据应该有一个 id 字段。

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

原文由 ESP32 发布，翻译遵循 CC BY-SA 4.0 许可协议