v-for循环把绑定的事件也循环了，点击其中一个其他也受影响，怎么解决

Question

<van-card v-for="item in chooseList" :key="item.id">
  <template #tags>
    <van-image width="100%" height="100%" src="https://img.yzcdn.cn/vant/cat.jpeg"
            style="display: flex;margin-top: 0.3rem;margin-left: 0.2rem;" />
    <div style="display: flex; flex-direction: column;margin-left: 0.3rem;">
      <span class="title">{{item.bookName}}</span>
      <span :class="{desc: isActive, descAll: isAllActive}">{{item.desc}}</span>
    </div>
  </template>
  <template #footer>
    <van-button class="allButton" size="mini" @click="showAll(item)" v-if="isActive">展开</van-button>
    <van-button class="allButton" size="mini" @click="showPart(item)" v-if="isAllActive">收起</van-button>
  </template>
</van-card>

showAll(item) {
  this.id = item.id;
  this.isAllActive = true;
  this.isActive = false;
},
showPart(item) {
  this.id = item.id;
  this.isAllActive = false;
  this.isActive = true;
}

我要动态展开和收起，怎么解决动态绑定class的问题

Answer 1

<van-card v-for="(item, index) in chooseList" :key="item.id">
  <template #tags>
    <van-image width="100%" height="100%" src="https://img.yzcdn.cn/vant/cat.jpeg"
            style="display: flex;margin-top: 0.3rem;margin-left: 0.2rem;" />
    <div style="display: flex; flex-direction: column;margin-left: 0.3rem;">
      <span class="title">{{item.bookName}}</span>
      <span :class="{desc: item.isCollapse, descAll: !item.isCollapse}">{{item.desc}}</span>
    </div>
  </template>
  <template #footer>
    <van-button class="allButton" size="mini" @click="showAll(item, index)" v-if="item.isCollapse">展开</van-button>
    <van-button class="allButton" size="mini" @click="showPart(item, index)" v-else>收起</van-button>
  </template>
</van-card>

// js, 数据获取的时候给每一个卡片绑定一个标示
this.chooseList = [...data]
this.chooseList.map(item => {
    this.$set(item, 'isCollapse', false)
})

showAll(item, index) {
  this.id = item.id;
  this.$set(this.chooseList[index], 'isCollapse', false)
},
showPart(item, index) {
  this.id = item.id;
  this.$set(this.chooseList[index], 'isCollapse', true)
}

给每条数据加一个标示，收起展开按钮也要控制

Answer 2

你所有的元素都是依据 this.isAllActive 和 this.isActive判断的
肯定一改全改了啊。
应该是每个item有自己的item.isAllActive和item.isActive，这样才不会相互影响。

不过我认为更好的做法应该是在data里面记录一个activeId（就是你上面记录的this.id），
通过判断activeId是否等于item.id 来判断当前项是否被展开