Vue multimensional list transition on reorder

Question

I'm trying to get a list/grid of items to transition with a fancy effect as seen in the Vue dcs about list transitions, I based my current code on the example given here :

https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-list-move-transitions?file=/index.html:517-574

From the official docs on Vue transitions.

https://vuejs.org/v2/guide/transitions.html#List-Move-Transitions

My code:

<template>
  <div class="main_container" @click="shuffle()">
    <transition-group name="cell" tag="div" class="container">
      <div class="cell" v-border v-for="(item, index) in items" :key="index">{{ item.n }}</div>
    </transition-group>
  </div>
</template>
<!--SCRIPTS-->
<script>
export default {
  name: "LAYOUTcard19",

  data() {
    return {
      items: [],
    };
  },

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

  methods: {
    shuffle() {
      console.log("shuffle");
      this.items = _.shuffle(this.items);
    },
  },
};
</script>
<!--STYLES-->
<style scoped>
.main_container {
  width: 400px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container {
  width: 300px;
  height: 300px;
  display: flex;
  flex-wrap: wrap;
}
.cell {
  width: 20%;
  height: 20%;
  display: flex;
}
.cell-move {
  transition: transform 1s;
}
</style>

Create a working example for your code demonstrating the problem — Anurag Srivastava

Uchendu Uchendu · Accepted Answer · 2020-04-20T10:17:11

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>

Vue multimensional list transition on reorder

1 Answers