v-for traverses the array, and after disturbing the array sorting, the view is not updated
wanted to do a Vue official ide/transitions.html-sharp%E5%A4%9A%E4%B8%AA%E5%85%83%E7%B4%A0%E7%9A%84%E8%BF%87%E6%B8%A1" rel=" nofollow noreferrer > list transition effect, but found that v-for traverses the array, disrupting the array sorting, the view will not be updated?
related codes
<template>
<div class="page-item section">
<h2>skill</h2>
<mu-container class="container">
<transition-group name="flip-list" tag="div">
<!-- <template> -->
<mu-chip v-for="(item, index) in skills" class="chip" :key="index" color="-sharp009688">
{{item}}
</mu-chip>
<!-- </template> -->
</transition-group>
<button @click="shuffle">shuffle</button>
</mu-container>
</div>
</template>
<script>
import shuffle from "shuffle-array"
import {
mapState,
mapActions
} from "vuex"
export default {
data () {
return {
skills: ["vue", "react", "js", "html", "css", "node"]
}
},
computed: {
// ...mapState(["skills"])
},
methods: {
// ...mapActions(["shuffleSkills"]),
shuffle () {
console.log(this.skills)
const oldSkills = this.skills
this.skills = shuffle(this.skills)
console.log(this.skills)
console.log(this.skills === oldSkills)
// this.skills.push("Vue")
// this.shuffleSkills()
}
}
}
</script>
shuffle
2
Push"Vue"
you can see from the diagram that the order on the view has changed. this means that changing the order of the array elements alone does not make the v-for view update
.