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

Question

我是 vue.js 的新手。我有一个简单的 index.vue，它尝试连接到 contentful 并显示来自 contentful 的条目。我在 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，我将不胜感激。提前致谢

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

Answer 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 属性的原因。

阅读 Vue.js 文档 以获取更多信息。

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

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