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

Question

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

我收到了这个警告,我怎么能摆脱它？

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

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

Answer 2

您可以放心地忽略该警告.它来自vue的eslint插件,这是一个bug,一个月前修复但是vetur仍然使用旧版本的插件.

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

Answer 3

让我们看一个简单的例子！

我正在构建一个待办事项列表应用程序。所以我构建了一个名为的组件Todo，在我的TodoList组件中我会Todo像这样调用组件

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

希望能帮助到你！

Answer 4

希望这有效。

父组件

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

子组件

<template>
  <li>{{ video.snippet.title}}</li>
</template>

<script>
export default {
  name: "VideoListItem",
  props: ["video"]
};
</script>

<style scoped>
</style>

================================================== ====

聆听 => 当您提供 v-for 属性时，我们需要提供 v-key 属性。它提高了重新渲染我们的项目列表的性能。

Answer 5

<li class="list-group-item" v-for="server in Servers" v-bind:key="server">    

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

Answer 6

假设您正在迭代名为users的数组，那么您可以执行以下操作：

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