Vue2搭配Bootstrap使用Collapse折叠面板点击无响应问题求助

问题原因排查 #

• 首先是ID不匹配：触发折叠的按钮href属性绑定的目标是#collapse1，但子组件内折叠容器的id是collapse，两者完全不对应，自然无法触发
• 第二是版本适配错误：你项目中引入的BootstrapVue仅支持Bootstrap 4.x版本，Bootstrap 5.x和BootstrapVue不兼容；同时你使用了Bootstrap 5的data-bs-toggle这类原生属性，但项目中并没有引入Bootstrap的JS文件，原生属性无法生效
• 第三是使用方式错误：在Vue项目中使用BootstrapVue时，不要混用原生Bootstrap的data属性触发逻辑，应该直接用BootstrapVue提供的内置折叠组件，避免DOM渲染异步导致的绑定失效

解决方案（推荐使用BootstrapVue原生组件方案，适配Vue2+Bootstrap4.6） #

第一步：修改父组件代码 #

把原来的a标签触发，改成BootstrapVue的<b-button>配合v-b-toggle指令，同时确保目标ID和子组件对应

<template>
  <!-- Menu class for first process -->
  <div class="row mt-5 mb-3">
    <div class="col-12">
      <!-- 使用BootstrapVue内置的v-b-toggle指令绑定目标ID -->
      <b-button variant="secondary" block v-b-toggle="'collapse1'" class="d-grid">
        <h4 class="text left font-weight-normal">
          <span class="ml-3">Collapse 1</span>
        </h4>
      </b-button>
    </div>
    <collapseThis/>
  </div>
</template>

<script>
import collapseThis from './collapseThis.vue'
export default {
  name: 'collapse1',
  components: {
    collapseThis,
  }
}
</script>

<style scoped>
</style>

第二步：修改子组件代码 #

推荐直接用BootstrapVue内置的b-collapse组件，稳定性更高，同时保证ID和父组件绑定的目标一致：

<template>
  <b-collapse id="collapse1">
    Some code in here
  </b-collapse>
</template>

第三步：校准依赖版本 #

卸载现有不兼容的Bootstrap版本，安装Bootstrap4.6：

npm uninstall bootstrap
npm install bootstrap@4.6.2

如果坚持使用Bootstrap5，需要卸载BootstrapVue，手动引入Bootstrap5的JS文件，同时保证触发按钮的target和折叠容器ID完全匹配，不过Vue2没有官方适配Bootstrap5的稳定组件库，该方案兼容性风险较高。

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