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

Question

我正在尝试按照他们文档中的示例实现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>

Answer 1

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

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

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