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

问题

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.

回答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

回答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>

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

回答4:

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>

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

标签

vuejs2