Vue v-for生成元素中Bootstrap Tooltip失效问题求助

问题根源 #

你当前的代码中，Bootstrap Tooltip仅在页面首次加载时通过$(function(){...})初始化了当时存在的元素。但通过v-for动态生成的新元素（比如点击按钮新增的第三个img），在DOM渲染完成后没有被重新调用.tooltip()方法，所以无法触发提示功能。

解决方案 #

方案1：修改数据后重新初始化Tooltip #

利用Vue的$nextTick方法，等待DOM更新完成后，重新初始化所有Tooltip元素（注意先销毁旧实例避免重复绑定）：

修改Vue实例的modify_data方法：

methods: {
  modify_data() {
    this.EQP_USER_NOW = [
      { EQP: "A", USER: "Andy" },
      { EQP: "B", USER: "Tony" },
      { EQP: "C", USER: "Max" }
    ]
    // 等待Vue完成DOM异步更新
    this.$nextTick(() => {
      // 先销毁已存在的Tooltip实例
      $('[data-toggle="tooltip"]').tooltip('dispose')
      // 重新初始化所有Tooltip
      $('[data-toggle="tooltip"]').tooltip({
        animated: 'fade',
        placement: 'right',
        html: true
      })
    })
  }
}

方案2：使用Vue自定义指令（推荐） #

自定义指令可以让每个动态渲染的元素自动初始化Tooltip，更符合Vue的组件化思想，无需手动调用初始化方法：

1. 在Vue实例创建前添加自定义指令：

Vue.directive('tooltip', {
  // 元素插入DOM时初始化Tooltip
  inserted(el) {
    $(el).tooltip({
      animated: 'fade',
      placement: 'right',
      html: true
    })
  },
  // 元素从DOM移除时销毁Tooltip，避免内存泄漏
  unbind(el) {
    $(el).tooltip('dispose')
  }
})

2. 修改HTML中的img标签，替换data-toggle="tooltip"为自定义指令v-tooltip：

<img v-for="(item, idx) in EQP_USER_NOW" :key="item.EQP" src="https://picsum.photos/200/200" width="100px" height="100px" v-tooltip title="Some tooltip text!" :id="idx">

注：把:key="idx"改为:key="item.EQP"更合理，因为数组元素的索引会随数组变化而改变，使用唯一标识可以避免Vue复用元素时出现异常。

额外说明 #

• 方案2是更优解，因为它自动处理了元素的创建和销毁，不需要在每次数据更新时手动操作DOM。
• 确保jQuery和Bootstrap的加载顺序正确（jQuery在前，Bootstrap在后），否则Tooltip无法正常工作。

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