Vue 3中点击按钮后Tooltip无法更新的问题求助

问题根源 #

Bootstrap 5的Tooltip组件在初始化时会缓存元素的title（或data-bs-title）值，之后即使Vue通过绑定更新了DOM的title属性，Tooltip实例不会自动感知并同步这个变化，所以需要手动操作Tooltip实例来更新内容。

修复步骤 #

1. 修正组件data选项的写法（你的代码遗漏了return，这是Vue选项式API的必填项）
2. 在组件内单独管理Tooltip实例（避免全局初始化可能带来的异步渲染问题）
3. 监听tooltipText变化，手动更新Tooltip内容

完整修改后的Component.vue代码 #

<template>
  <div>
    <button class="btn btn-success col-12" @click="changeTooltip()">Click to change Tooltip</button>
    <!-- 添加ref用于获取DOM元素 -->
    <input 
      ref="tooltipInput" 
      class="form-control col-12" 
      data-bs-placement="bottom" 
      :title="tooltipText" 
    />
  </div>
</template>

<script>
import { Tooltip } from "bootstrap";

export default {
  data() {
    // 必须返回一个对象
    return {
      tooltipText: "Test Tooltip Text"
    };
  },
  mounted() {
    // 初始化Tooltip并保存实例到组件实例上
    this.tooltipInstance = new Tooltip(this.$refs.tooltipInput);
  },
  watch: {
    // 监听tooltipText的变化
    tooltipText(newText) {
      // 使用Bootstrap Tooltip的setContent方法直接更新内容
      this.tooltipInstance.setContent({ '.tooltip-inner': newText });
      
      // 另一种可选方式：更新元素title属性后调用update方法
      // this.$refs.tooltipInput.setAttribute('title', newText);
      // this.tooltipInstance.update();
    }
  },
  methods: {
    changeTooltip() {
      this.tooltipText = "New Tooltip Text";
    }
  },
  beforeUnmount() {
    // 组件销毁前销毁Tooltip实例，防止内存泄漏
    this.tooltipInstance.dispose();
  }
};
</script>

额外说明 #

• 建议移除App.vue中全局初始化Tooltip的代码，改为在需要使用Tooltip的组件内单独初始化，避免因组件异步渲染导致的初始化失效问题。
• 如果需要在多个组件中复用Tooltip功能，可以封装成Vue自定义指令，提升复用性。

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