Estaba trabajando en las transiciones de vue y me encontré con una cosa que no entiendo.

Quiero mostrar una lista que se sigue mezclando. Para esto escribí la función shuffle(), que se llama cada 2000ms. Al final de la función, asigno la nueva matriz mezclada a la variable this.items . Sin embargo, ¡la lista en el DOM no se baraja! Si reinicio this.items como una matriz vacía de antemano, ¡la lista se baraja!

Puede ver esto en la función shuffle() que se muestra a continuación. Si elimino la línea con this.items = [] , la reproducción aleatoria no funciona.

Sería feliz si alguien pudiera explicarme esto.

Esa es la parte html del código:

 <transition-group name="flip-list" tag="ul"> <li v-for="item in items" :key="item"> {{ item }} </li> </transition-group>

Esa es la parte js :

 <script> export default { data () { return { items: [1, 2, 3, 4, 5, 6, 7, 8, 9] } }, created () { setInterval(() => { this.shuffle() }, 2000) }, methods: { shuffle () { const result = this.items let currentIndex = result.length let randomIndex // While there remain elements to shuffle... while (currentIndex !== 0) { // Pick a remaining element... randomIndex = Math.floor(Math.random() * currentIndex) currentIndex-- // And swap it with the current element. [result[currentIndex], result[randomIndex]] = [ result[randomIndex], result[currentIndex]] } this.items = [] this.items = result } } } </script>