[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\"
         


        

Answer 1

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

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

Answer 2

I solved this by creating a unique key function to add keys to each of my arrays. Then using it in v-for as the key...

<div
            class="postBlob"
            v-for="{
              key,
              user,
              post,
              dateTime
            } in localPostData.slice().reverse()"
            :key="key"
          >
            <strong class="userBlobIndy">{{ user }} </strong>
            <h2 class="postBlobIndy">
              {{ post }}
              <p>{{ dateTime }}</p>
            </h2>
          </div>

Answer 3

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 4

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 5

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

Answer 6

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,B's sample characters.you can take any character in that place