Vue 3 + Bootstrap 5中Tooltip为何会破坏Collapse功能？

问题原因 #

大概率是**错误修改Bootstrap Tooltip的默认允许列表（allowList）**导致的：如果直接赋值Tooltip.Default.allowList.table = []，会覆盖整个allowList对象，移除Bootstrap其他组件（如Collapse）所需的元素权限，导致Collapse无法正常初始化。另外，全局初始化Tooltip的时机不当，也可能和Vue的DOM更新机制产生冲突。

解决方案 #

1. 正确扩展Tooltip的allowList（若需自定义） #

不要直接覆盖allowList，而是在原有默认配置基础上添加需要的元素规则：

import { Tooltip } from 'bootstrap'

// 扩展allowList，保留原有默认配置
Object.assign(Tooltip.Default.allowList, {
  table: [] // 添加你需要的元素规则
})

2. 组件内局部初始化Tooltip，避免全局冲突 #

在Vue组件的生命周期钩子中，仅初始化当前组件内的Tooltip元素，并在组件销毁时清理实例，避免内存泄漏：

<template>
  <div>
    <!-- Collapse 元素 -->
    <button 
      class="btn btn-primary" 
      type="button" 
      data-bs-toggle="collapse" 
      data-bs-target="#collapseExample"
    >
      折叠按钮
    </button>
    <div class="collapse" id="collapseExample">
      <div class="card card-body">
        折叠内容
      </div>
    </div>

    <!-- Tooltip 元素 -->
    <button 
      type="button" 
      class="btn btn-secondary mt-3"
      data-bs-toggle="tooltip" 
      data-bs-placement="top" 
      title="这是一个Tooltip"
    >
      带Tooltip的按钮
    </button>
  </div>
</template>

<script>
import { Tooltip } from 'bootstrap'

export default {
  data() {
    return {
      tooltips: []
    }
  },
  mounted() {
    // 仅初始化当前组件内的Tooltip元素
    this.tooltips = Array.from(this.$el.querySelectorAll('[data-bs-toggle="tooltip"]'))
      .map(el => new Tooltip(el))
  },
  unmounted() {
    // 销毁Tooltip实例
    this.tooltips.forEach(tooltip => tooltip.dispose())
  }
}
</script>

3. 确保Bootstrap JS正确导入 #

在main.js中仅导入一次Bootstrap的JS，避免重复导入引发冲突：

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.js'

验证步骤 #

1. 移除所有覆盖Tooltip allowList的错误代码
2. 按照上述方式在组件内局部初始化Tooltip
3. 测试Collapse和Tooltip功能是否恢复正常

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