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

question from:https://stackoverflow.com/questions/51086657/vue-warn-duplicate-keys-detected-x-this-may-cause-an-update-error

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