vue-language-server :迭代中的元素期望有 'v-bind:key' 指令 [英] vue-language-server : Elements in iteration expect to have 'v-bind:key' directives
问题描述
Vue.js 2.5/Visual Studio Code 编辑器
我收到了这个 es-lint 警告，我该如何摆脱它?
<插槽:名称=插槽名称":row-data="props.rowData";:row-index="props.rowIndex";:row-field="props.rowField"></slot></模板>我尝试添加索引，但没有解决此问题
<插槽:名称=插槽名称":row-data="props.rowData";:row-index="props.rowIndex";:row-field="props.rowField"></slot></模板>这个问题很好回答，但我想添加一个示例和文档链接:
此结构导致上述错误:
{{指数}}.{{项目名称}}您可以通过像这样更改语法来修复它:
{{指数}}.{{项目名称}}如果您的商品没有任何唯一的 id 字段，您只需编写 :key="item".但是，出于性能原因，您的数据应该有一个 id 字段.
https://vuejs.org/v2/guide/list.html#key
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>
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
这篇关于vue-language-server :迭代中的元素期望有 'v-bind:key' 指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
