大家好，在开发 Vue 项目中，我们有时会经常遇到 “elements in iteration expect to have ‘v-bind:key’ error” 这样的问题，要解决这个问题，您需要在 v-for 元素上设置一个唯一的 v-bind:key （简称为 :key）。

<div v-for="item in items" v-bind:key="item.id">
  <li>{{item}}</li>
</div>

如果您正在迭代对象数组，建议大家使用唯一标识符，例如 Mongoose ObjectId 或 uuid，作为 :key。

使用数组索引（Array Index）作为键

如果你没有良好的唯一标识符，你也可以使用数组索引作为键。如下段代码所示：

<div v-for="(item, index) in items" v-bind:key="index">
  <li>{{item}}</li>
</div>

但是，如果您使用数组索引作为键，那么在使用依赖于 v-for 中的内部状态的组件时要小心。例如，下面的第二个列表是不正确的。单击 addValueToMiddle 后，internalValue 不会与 value 对应，因为当 items 数组发生更改时，Vue 不会重新渲染现有的 item 组件。

Vue.component('item', {
  props: ['value'],
  data() {
return {
      internalValue:this.value
    };
  },
  template: `<li>Internal: {{internalValue}} Prop: {{value}}</li>`
});

const app =new Vue({
  data: () => ({ items: [1, 2, 3, 4, 5] }),
  template: `
    <div>
      <button @click="addValueToMiddle">Add value to middle</button>
      <ul>
        <item v-for="(i, index) in items" :value="i" :key="index"></item>
      </ul>
    </div>
  `,
  methods: {
    addValueToMiddle() {
this.items.splice(Math.ceil(this.items.length / 2), 0,this.items.length + 1)
    }
  }
});

注：本文属于原创文章，版权属于「前端达人」公众号及 qianduandaren.com 所有，未经授权，谢绝一切形式的转载