在 index.vue 中出现错误“迭代中的元素期望有 'v-bind:key' 指令 vue/require-v-for-key”

Posted 2023-03-08

【中文标题】在 index.vue 中出现错误“迭代中的元素期望有 \'v-bind:key\' 指令 vue/require-v-for-key”

【英文标题】：Getting Error "Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key" in index.vue在 index.vue 中出现错误“迭代中的元素期望有 'v-bind:key' 指令 vue/require-v-for-key”

【发布时间】：2019-06-11 04:57:03

【问题描述】：

我是 vue.js 的新手。我有一个简单的 index.vue 尝试连接到内容并显示来自内容的条目。我在 index.vue 中的代码如下所示：

---

<template>
  <div>
    <!-- render data of the person -->
    <h1> person.fields.name </h1>
    <!-- render blog posts -->
    <ul>
      <li v-for="post in posts">
         post.fields.title 
      </li>
    </ul>
  </div>
</template>

<script>
  import createClient from '~/plugins/contentful.js'

  const client = createClient()

---

但是，当我从浏览器尝试 localhost:3000 时...返回以下错误：

---

./pages/index.vue 中的错误 模块错误（来自 ./node_modules/eslint-loader/index.js）：

C:\Users\admin\pdress\pages\index.vue 7:7 错误迭代中的元素期望有 'v-bind:key' 指令 vue/require-v-for-key

✖ 1 个问题（1 个错误，0 个警告）

---

如果有人可以帮助我进一步学习 vue.js，我将不胜感激。提前致谢

【问题讨论】：

使用<li v-for="(post, index) in posts" :key="index">或<li v-for="post in posts" :key="post.id">

您可以在the docs中阅读更多关于为什么需要key

vue-language-server : Elements in iteration expect to have 'v-bind:key' directives的可能重复

【参考方案1】：

@ljubadr 的建议是正确的。你需要这样做：

<li v-for="post in posts" v-bind:key="post.id">

<!-- OR USE SHORTCUT NOTATION -->
<li v-for="post in posts" :key="post.id">

原因与性能有关。属性 key 帮助 Vue 确定列表中的唯一项目。考虑排序的例子。如果您的 UI 有一个帖子排序按钮，那么您在 post 数组中的项目顺序将会改变。但这是否意味着 Vue 将重新渲染整个列表？当然不是！使用:key，它可以确定该项目是否已在 UI 上呈现。它只是打乱 DOM 节点并节省昂贵的渲染周期。

其次，如果您在使用 v-for 并且未提供 :key 时列表中有复杂的组件，那么每当更改或重新排序列表时，它只会更改 DOM 但不会破坏现有的组件，这可能导致本地状态不匹配。这就是为什么必须有:key 属性的原因。

Read Vue.js documentation 了解更多信息。

注意：还请记住，将v-for index 用于:key 是一个坏主意，因为它在您的收藏中并不是唯一的。

【参考方案2】：

<template>
  <div>
    <!-- render data of the person -->
    <h1> person.fields.name </h1>
    <!-- render blog posts -->
    <ul>
      <li v-for="post in posts" :key = "post">
         post.fields.title 
      </li>
    </ul>
  </div>
</template>


If this is not going to work use any unique field from your object for example if you have id in your object then,
:key = "post.id"

【讨论】：

您能否提供更多信息、参考资料、上下文等

【参考方案3】：

您必须为

定义一个

:key

属性

v-for 指令。对于<transition-group> 标签。

对于这种情况v-for，您必须显式设置，

  <li v-for="(post, i) in posts" :key="i + 10">
     post.fields.title 
  </li>

如果您注意到您可以在v-for 中定义最多两个参数，您必须定义项目（帖子）并且可以定义帖子的索引。