v-tooltip 不显示其背后的组件答案

【问题标题】：v-tooltip doesn't show component behind itv-tooltip 不显示其背后的组件
【发布时间】：2019-03-20 19:28:25
【问题描述】：

我正在尝试按照他们文档中的示例实施v-tooltip，但我无法使其工作。如果我复制示例，我会收到此错误：

[Vue warn]: Property or method "on" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

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

这是模板：

<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>

【问题讨论】：

stackoverflow.com/questions/49079936/… 也许这会有所帮助？
激活器表示“on”，即鼠标悬停在组件上的位置（可以将其更改为属性，以便以编程方式激活它）。我真的不明白为什么单花括号。
你用的是什么版本的vue？ 2.6 之前的版本不支持v-slot
"vue": "^2.5.17"，这可能是问题@thanksd

标签： vue.js vuetify.js

【解决方案1】：

您可能会收到该错误，因为您使用的 Vue 版本不支持 v-slot 指令，即 added in Vue version 2.6。

要么更新你的 Vue 版本，要么使用之前版本支持的插槽语法：

<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>

【讨论】：