vue.js之获取错误 "Elements in iteration expect to have ' v-bind :key' directives vue/require-v-for-key"in index. vue

我是 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，我将不胜感激。提前致谢

请您参考如下方法:

@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是一个坏主意，因为它在您的收藏中并不是唯一的。