Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.4k views
in Technique[技术] by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
<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)
}

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...