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

Answer 6

you can use this example

<template>
    <div  >
      
       <div v-for="categori in blogs"   id="blog-body" :key="categori.title" >

    <h2 >{{categori.title}}</h2>
    <h3>{{categori.contact }}</h3>
      
       </div>

    </div>
    
</template>
<script>
export default {
    data(){
        return{
            blogs:[
                {title:'this is title 1',contact : ' this is contact for test javascript'},
                {title:'this new title ',contact : ' this is contact for vue'},
                {title:'this is new title 2',contact : ' this is contact for  vue js'}
            ]
          
        }
    },
   
   
    }

</script>

Answer 7

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>