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

发布于 2022-09-12 13:15:40 字数 1084 浏览 12 评论 0

<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的问题

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

昔梦 2022-09-19 13:15:40
<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)
}

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

请叫√我孤独 2022-09-19 13:15:40

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

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文