如何在VueJS 2中使用Bootstrap 5的Collapse折叠组件

方案1：使用Bootstrap 5原生Collapse实例 #

该方案完全复用Bootstrap自带的折叠交互逻辑，适配官方API：

1. 首先给模板中的折叠容器添加ref属性，避免直接操作DOM选择器，适配Vue组件复用场景：

<!-- 按钮部分无需修改，保留原data-bs-*属性即可正常触发 -->
<button
  class="btn btn-danger"
  type="button"
  data-bs-toggle="collapse"
  data-bs-target="#collapseExample"
  aria-expanded="false"
  aria-controls="collapseExample"
>
  标记为已拒绝
</button>
<div class="collapse" id="collapseExample" ref="collapseEl">
  <div class="card card-body">
    折叠组件的占位内容。该面板默认隐藏，用户触发对应触发器后会显示。
  </div>
</div>

2. 脚本部分在mounted钩子初始化实例，同时可以封装手动控制方法，组件销毁前记得释放实例避免内存泄漏：

import Collapse from 'bootstrap/js/dist/collapse'
export default {
  data() {
    return {
      collapseInstance: null
    }
  },
  mounted() {
    // 配置项toggle: false表示初始化时不修改当前折叠状态
    this.collapseInstance = new Collapse(this.$refs.collapseEl, {
      toggle: false
    })
  },
  beforeDestroy() {
    // 组件销毁时释放实例
    this.collapseInstance?.dispose()
  },
  methods: {
    // 手动切换折叠状态
    toggleCollapse() {
      this.collapseInstance.toggle()
    },
    // 手动展开
    showCollapse() {
      this.collapseInstance.show()
    },
    // 手动收起
    hideCollapse() {
      this.collapseInstance.hide()
    }
  }
}

如果单组件内有多个折叠元素，使用ref数组遍历初始化即可：

mounted() {
  this.$refs.collapseItems.forEach(el => new Collapse(el, { toggle: false }))
}

方案2：纯Vue实现（无Bootstrap JS依赖） #

该方案更轻量，符合Vue声明式编程习惯，无需引入Bootstrap的折叠JS文件：

1. 模板部分绑定状态和点击事件，复用Bootstrap的show类控制显隐：

<button
  class="btn btn-danger"
  type="button"
  @click="isCollapseOpen = !isCollapseOpen"
  :aria-expanded="isCollapseOpen"
  aria-controls="collapseExample"
>
  标记为已拒绝
</button>
<div :class="['collapse', { show: isCollapseOpen }]" id="collapseExample">
  <div class="card card-body">
    折叠组件的占位内容。该面板默认隐藏，用户触发对应触发器后会显示。
  </div>
</div>

2. 脚本部分仅需要新增状态变量即可：

export default {
  data() {
    return {
      isCollapseOpen: false // 初始为折叠状态
    }
  }
}

内容的提问来源于stack exchange，提问作者redshift