vue,transition在v-for的嵌套下怎么使用

Question

<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>

当我点击一个按钮的时候我想要一个div显示出来

Answer 1

<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>