[Vue警告]：检测到重复的键：x。这可能会导致更新错误

Question

当我将项添加到具有重复ID的数组时，我一直收到错误。

即

active_widgets:Array[4]
0:Object
    id:1
    name:"Text Blocks"
    selected:false
    set:false
1:Object
    id:3
    name:"Bibliographies/References"
    selected:false
    set:false
2:Object
    id:1
    name:"Text Blocks"
    selected:false
    set:false
3:Object
    id:2
    name:"Free Text"
    selected:"Test"
    set:false

在我的场景中，'id'元素可能是重复的，因为用户可以多次在页面上拥有相同的小部件。我想知道我是否可以抑制或删除VueJS一直在控制台中抛出的警告。

Answer 1

不同v-for循环的相同键导致此警告。您可以使用不同的密钥为不同的v-for循环避免这种情况。

<div v-for="(item, i) in items" :key="i"></div>

<div v-for="(item, i) in items2" :key="'A'+ i"></div>

<div v-for="(item, i) in items3" :key="'B',+ i"></div>

//here A,B's sample characters.you can take any character in that place 

Answer 2

另一种方法：

将v-for元素嵌套在任何其他元素中似乎也有效。

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

<div>
    <div v-for="(item, index) in items2" :key="index"></div>
</div>

Answer 3

您需要使用唯一值绑定到key。当具有一个密钥的组件的数据更改与具有重复密钥的另一个组件更新时，不这样做将导致应用程序出现问题。

您应该为active_widgets数组中的每个项分配一个唯一的键属性，然后将该键绑定到该属性。

---

在没有看到任何代码的情况下，我不知道您的独特用例是什么。但是，您可以通过几种方法为数组中的项添加唯一键属性。

这是在created方法中执行此操作的示例。

created() {
  this.active_widgets.forEach((item, index) => this.$set(item, 'key', index));
}

如果在将项添加到此数组时需要添加唯一键，则可以维护计数器并在每次添加时增加它：

let WidgetCount = 0;

export default {
  data() {
    return { active_widgets: [] }
  },
  methods: {
    addWidget(id, name) {
      this.active_widgets.push({ 
        id, 
        name, 
        selected: false,
        set: false, 
        key: WidgetCount++
      })
    }
  }
}