时间戳

首页 > 解决方案 > v-tooltip 不显示其背后的组件

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

问题描述

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

标签： vue.jsvuetify.js

解决方案

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

要么更新你的 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>

推荐阅读