v-for循环把绑定的事件也循环了,点击其中一个其他也受影响,怎么解决
<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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
给每条数据加一个标示,收起展开按钮也要控制
你所有的元素都是依据 this.isAllActive 和 this.isActive判断的
肯定一改全改了啊。
应该是每个item有自己的item.isAllActive和item.isActive,这样才不会相互影响。
不过我认为更好的做法应该是在data里面记录一个activeId(就是你上面记录的this.id),
通过判断activeId是否等于item.id 来判断当前项是否被展开