[Vue warn]: Duplicate keys detected: x. This may cause an update error

Question

I keep getting an error when I add an item to the array which has duplicate id.

i.e.

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

In my scenario, 'id' element may be duplicate because the user can have the same widget on the page multiple times. I want to know if I can suppress or remove the warning that VueJS keeps throwing in the console.

Answer 1

Same key for different v-for loops causing this warning. You can avoid this using different key for different v-for loops.

    <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 and B are just sample characters. You can basically use any character instead of those (just for uniqueness).

Answer 2

An alternative method:

Nesting the v-for elements inside any other element also seems to work.

<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

You need to bind to the key with a unique value. Not doing so will cause problems in your application when a change in data for a component with one key updates that component and the other component with the duplicate key.

You should assign a unique key property to each of the items in the active_widgets array and then bind the key to that property.

---

Without seeing any of your code, I don't know what your unique use case is. But here are a couple ways you could add a unique key property to the items in your array.

Here's an example doing that in the created method.

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

If you need to add a unique key when an item is added to this array, you could maintain a counter and increment it each time an addition is made:

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++
      })
    }
  }
}

Answer 4

<template v-for="it in items">
    <li :key="it.id + '-name'">{{it.name}}</li>
</template>
 

https://github.com/vuejs/vue/issues/7323

Answer 5

<div v-for="(data, index)" in active_widgets" :key="index"> 
   {{data.id}}
   {{data.name}}
   {{data.selected}}
   {{data.set}}
</div>