v-tooltip 不显示其背后的组件 [英] v-tooltip doesn't show component behind it

问题描述

我正在尝试按照他们文档中的示例实施 v-tooltip，但我不能让它工作.如果我复制该示例，则会收到此错误:

I'm trying to implement v-tooltip following the example in their documentation but I cannot make it work. If I copy the example, i receive this error:

[Vue 警告]:属性或方法on"未在实例上定义，但在渲染期间被引用.通过初始化属性，确保此属性是响应式的，无论是在数据选项中，还是对于基于类的组件.

如果我声明属性 on，则 btn 根本不会出现.

if I declare property on the btn doesn't show up at all.

这是模板:

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

推荐答案

您可能会收到该错误，因为您使用的 Vue 版本不支持 v-slot 指令，这是 在 Vue 2.6 版中添加.

You're probably getting that error because the version of Vue that you're using doesn't support the v-slot directive, which was added in Vue version 2.6.

要么更新你的 Vue 版本，要么使用之前版本支持的 slot 语法:

Either update your version of Vue, or use the slot syntax supported in prior versions:

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

这篇关于v-tooltip 不显示其背后的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！