Vue lodash.shuffle для списка?

Question

[HamSter]

Codesandbox ShuffleList.vue

Есть некий список с анимацией lodash.shuffle:

<template>
  <div id="filter">
    <button v-on:click="shuffle">Перемешать</button>

    <transition-group 
      name="list" 
      mode="out-in" 
      tag="ul" 
      class="catalog-list">

      <li 
        :key="index" 
        v-for="(item, index) in items">

        <h3>{{ item.name }}</h3>
        <span>{{ item.price }}</span>

      </li>

    </transition-group>

  </div>
</template>

<script>
import _shuffle from "lodash.shuffle";

export default {
  name: "FilterList",
  data() {
    return {
      items: [
        { name: "Name 1", price: "200" },
        { name: "Name 2", price: "100" },
        { name: "Name 3", price: "5" }
      ]
    };
  },
  methods: {
    shuffle() {
      this.items = _shuffle(this.items);
    }
  }
};
</script>

Делаю по примеру, но анимация не происходит.

Вопрос: Как реализовать lodash.shuffle анимацию для списка?

Answer 1

[0xD34F]

Использовать индекс в качестве key не надо никогда. Чтоб вот такого, как у вас сейчас, не было.

Делаем нормальный key - всё окей.