van-collapse组件如何判断折叠面板的状态

飘散的蒲公英

已于 2022-11-25 15:25:59 修改

阅读量1.2k

点赞数 2

文章标签：前端

于 2022-11-25 15:12:17 首次发布

本文链接：https://blog.csdn.net/xt190224/article/details/128038088

版权

<van-collapse
            v-model="activeNames"
            v-for="(item, index) in qaItems"
            :key="'fold' + index"
            :accordion="true"
            @change="collapseChange(item, index)"
          >
            <van-collapse-item
              :title="item.title"
              :name="index"
            >
              <div
                v-html="subitem"
                v-for="(subitem, index) in htmlList"
                :key="'ht' + index"
              >
                {{ subitem }}
              </div>
            </van-collapse-item>
</van-collapse>

通过v-model绑定的activeNames的值，点击折叠面板，展开有值，收起值为空。在change事件中，判断activeNames是否有值来执行业务。

collapseChange(item, index) {
    this.$nextTick(() => {
      console.log('name', this.activeNames)
      if (this.activeNames !== '') {
        this.saveOptionRecord(item.htmlId, 'reading', item.title)
      }
    })
  }