Vue3集成Bootstrap5时Collapse组件展开后无法收起问题求助

针对你遇到的Collapse组件能展开但无法收起的问题，结合你的依赖配置，给出以下排查思路：

1. 移除可能冲突的Vue折叠过渡组件 #

你的依赖中包含@ivanv/vue-collapse-transition，这个组件的功能和Bootstrap原生Collapse存在重叠，很可能导致JS逻辑冲突。执行以下命令卸载该包后重启项目测试：

npm uninstall @ivanv/vue-collapse-transition

2. 手动初始化Bootstrap Collapse实例 #

Vue 3的DOM渲染机制可能导致Bootstrap自动初始化的事件监听失效，尝试在组件中手动初始化Collapse：

<template>
  <!-- 保持原有的模板内容 -->
</template>

<script>
import Collapse from 'bootstrap/js/dist/collapse'

export default {
  mounted() {
    // 获取折叠元素并手动初始化
    const collapseEl = document.getElementById('collapseExample')
    Collapse.getOrCreateInstance(collapseEl)
  }
}
</script>

3. 清理无关/不兼容依赖 #

你的package.json中存在几个可能引发问题的依赖：

• all、install、npm属于无意义依赖，完全可以移除
• vue2-daterange-picker是Vue 2组件，在Vue 3项目中可能引入兼容层或冲突的DOM操作逻辑

执行以下命令清理这些依赖，重新安装后测试：

npm uninstall all install npm vue2-daterange-picker
npm install

4. 避免Vue重新渲染导致事件丢失 #

Vue 3的响应式更新可能会重新渲染Collapse容器，导致Bootstrap绑定的事件丢失。可以给折叠容器添加v-once指令，防止重复渲染：

<div class="collapse" id="collapseExample" v-once>
  <div class="card card-body">Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.</div>
</div>

5. 验证Bootstrap版本兼容性 #

当前使用的Vue 3.0.0是较早版本，尝试降级Bootstrap到更稳定的5.2.x版本，排查是否存在版本适配问题：

npm install bootstrap@5.2.3

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