Question

我正在使用Vuetify开发Vue应用程序。我正在尝试在v-list-tile-avatar元素周围添加一个v-tooltip，像这样：

              <v-tooltip bottom>
                <template v-slot:activator="{ on }">
                  <v-list-tile-avatar>
                      <img src="avatar.png">
                  </v-list-tile-avatar>
                </template>
                <span>Click to view.</span>
              </v-tooltip>

但这似乎会使头像图像消失。

没有工具提示，我检查了头像元素，并且看到了：

<div class="v-list__tile__avatar">
  <div class="v-avatar">
    <img src="avatar.png">
  </div>
</div>

通过工具提示，我看到了：

<span class="v-tooltip v-tooltip--bottom">
  <span></span>
</span>

这是怎么回事？

Answer 1

您缺少v-on =“ on”激活器：

 <img v-on="on" ... />

示例：https://codepen.io/hans-felix/pen/XWJadQo

Answer 2

知道了！

<v-tooltip bottom>
  <v-list-tile-avatar slot="activator">
    <img src="avatar.png">
  </v-list-tile-avatar>
  <span>Click to view.</span>
</v-tooltip>

^这有效。不知道在包含带有v-slot：activator =“ {on}”的模板与在元素上设置v-on =“ on”以及不使用模板并在元素上放置slot =“ activator”之间有什么区别相反，但如果其中一个无效，请尝试另一个。

为什么v-tooltip导致内容消失？

2 个答案: