Vue的 transition在v-for的嵌套下怎么用

<template> <div> <div class="a" v-for="(item,index) in items"> <a @click="btn(index)" style="cursor: pointer" :key="1">點擊</a> <transition name="slide-fade"> <div class="b" v-if="show[index]" :key="2"> </div> </transition> </div> </div> </template> <script> export default { data() { return { show: [], items: [ {id: 1}, {id: 2}, {id: 3}, {id: 4}, {id: 5} ] } }, mounted() { for (let i = 0; i < this.items.length; i++) { this.show[i] = false; } }, methods: { btn(id) { this.show[id] = !this.show[id]; console.log(this.show); } } } </script> <style> .a { width: 500px; margin: 0 auto; border: 1px solid; } .b { width: 100%; height: 100px; border: 1px solid; } /* 可以設置不同的進入和離開動畫 */ /* 設置持續時間和動畫函數 */ .slide-fade-enter-active { transition: all .3s ease; } .slide-fade-leave-active { transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); } .slide-fade-enter, .slide-fade-leave-to /* .slide-fade-leave-active for below version 2.1.8 */ { transform: translateX(10px); opacity: 0; } </style>


修改js

<script>
  export default { data () { return { show: [], items: [ {id: 1}, {id: 2}, {id: 3}, {id: 4}, {id: 5} ] } }, mounted () { for (let i = 0; i < this.items.length; i++) { this.$set(this.show, i, false) // 使用this.$set 關鍵代碼 } }, methods: { btn (id) { this.$set(this.show, id, !this.show[id]) // 使用this.$set 關鍵代碼 console.log(this.show) } } } </script>