如何为 VueJS 单页应用程序导入 Bootstrap 4 Tooltip 插件？

Question

我正在尝试将 Bootstrap 4 与 VueJS 单页应用程序一起使用，但无法弄清楚如何让 tooltip 工作。 （注意：我知道有一个 Bootstrap-vue 项目，但我不想使用那个...但是）

这是我的简单测试：

<template>
  <div>
    <span id='tip'>Test link</span>
  </div>
</template>

<script>
import $ from 'jquery';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/js/dist/popover.js';
import 'bootstrap/js/dist/tooltip.js';

export default {
  name: 'test',
  created: function() {
    $('#tip').tooltip({
      title: 'hello world'
    });
  }
};
</script>

但是，这只会呈现 link 而没有工具提示。

控制台没有错误。那么，我在这里做错了什么？

Answer 1

原来我需要使用 mounted 属性，而不是 created 属性。已解决！

Answer 2

正如我在 Discord 中的回答：解决方案是使用 mounted 而不是 created，这样你就可以访问 dom 来让那种方法起作用（基本上）。

更多关于 Vue 生命周期钩子的信息here

如何为 VueJS 单页应用程序导入 Bootstrap 4 Tooltip 插件？

How to import Bootstrap 4 Tooltip plugin for VueJS single page app?

vuejs2

bootstrap-4

twitter-bootstrap-tooltip