vue-language-server:迭代中的元素期望具有“ v-bind:key”指令

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>
EvaPro2020/03/12 15:27:24

这项工作对我来说

<div :class="sliderClass()" v-for="(slide,index) in slides" :key="index">
<div :class="sliderClass()" v-for="slide in slides" :key="slide.SliderID">
十三米亚阳光2020/03/12 15:27:24

假设您要遍历名为users的数组,则可以执行以下操作:

<div v-for="(user,id) in users" :key="id" >
      <div class="card" >
       ...........................
      </div>
</div>
Sam小哥Tom2020/03/12 15:27:24
<li class="list-group-item" v-for="server in Servers" v-bind:key="server">    

像这样在标签中指定唯一键。

米亚神奇2020/03/12 15:27:24

让我们在这里看一个简单的例子!

我正在构建一个待办事项列表应用程序。所以我建立了一个名为的组件Todo,在我的TodoList组件内部我将这样调用Todo组件

    <todo v-for="todo in todos" v-bind:key="todo" v-bind:todo="todo"></todo>

希望能帮助到你!

伽罗小哥2020/03/12 15:27:24

您可以放心地忽略该警告。它来自vue的eslint插件,它是一个错误,已在一个月前修复,但也许vetur仍在使用旧版本的插件。

必须将key属性添加到传递给组件的内容中

阿飞飞云2020/03/12 15:27:24

这个问题已经很好回答,但是我想添加一个示例和指向文档的链接:

此结构导致上述错误:

<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://vuejs.org/v2/guide/list.html#key