[Vuejs]-Vue multimensional list transition on reorder

by

0👍

✅

As from the Vue documentation on transition-groups:

Elements inside are always required to have a unique key attribute.

So, when you’re assigning the index as key of a v-for loop, you receive a warning that is pretty straight forward:

(Emitted value instead of an instance of Error) Do not use v-for index as key on <transition-group> children, this is the same as not using keys.

To correct the misbehavior, add a unique id to your items during their generation:

mounted() {
  for (let i = 0; i < 20; i++) {
    let random = Math.random().toFixed(2);
    let cell = {id: i, n: random }; // here we add the id
    this.items.push(cell);
  }
}

That id can then be used as key when using v-for:

<div class="cell" v-border v-for="(item) in items" :key="item.id">{{ item.n }}</div>

Leave a comment