Vuetify工具提示未显示在DOM中

时间:2019-09-01 21:11:15

标签: vue.js vuetify.js

docs' example粘贴到组件模板中时:

<v-tooltip bottom>
  <template v-slot:activator="{ on }">
    <v-btn color="primary" dark v-on="on">Button</v-btn>
  </template>
  <span>Tooltip</span>
</v-tooltip>

...我在DOM中得到这个:

<span data-v-26084dc2="" class="v-tooltip v-tooltip--top"></span>

这是我在main.js中导入Vuetify的方式:

import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);

使用Vue 2.5.17Vuetify 1.3.15

1 个答案:

答案 0 :(得分:0)

<块引用>

v-slot 是在 Vue 2.6.0 中引入的。您需要使用较旧的插槽 使用 2.5.17 的语法并直接在 ​​ 元素上使用它

vuejs.org/v2/guide/components-slots.html#Deprecated-Syntax

<块引用>

slot 属性也可以直接用在普通元素上

<v-tooltip bottom>
   <v-btn slot="activator" color="primary" dark>Button</v-btn>
   <span>Tooltip</span>
</v-tooltip>