如何使 vuetify 工具提示在列表中工作？答案

【问题标题】：How to make vuetify tooltip work in list?如何使 vuetify 工具提示在列表中工作？
【发布时间】：2020-05-18 06:14:27
【问题描述】：

这是我的代码：

<div id='app'>
<v-app>
<v-list-tile-content>
<v-list-tile v-for="(item, index) in items" :key="item.id" >

  <v-list-tile-action>
    {{index+1}}.
  </v-list-tile-action>

  <v-tooltip bottom>
    <template v-slot:activator="{ on }">

      <v-list-tile-content>
          <v-list-tile-title v-text="`${item.title}`"></v-list-tile-title>
      </v-list-tile-content>

    </template>
    <span>Tooltip</span>
  </v-tooltip>

</v-list-tile>
</v-list-tile-content>
</v-app>
</div>

https://codepen.io/zbyszek-kisy/pen/RwWqarj

我不知道为什么当我试图将鼠标悬停在列表项上时工具提示没有显示

【问题讨论】：

您应该对错误采取一些措施〜“[Vuetify]无法找到目标[data-app]”。您还缺少激活器元素上的 v-on="on" 绑定
codepen 已修复

标签： javascript css vue.js vuetify.js

【解决方案1】：

您忘记将带有指令 v-on="on" 的工具提示激活器放在要激活它的每个元素中。

<div id='app'>
<v-app>
<v-list-tile-content>
<v-list-tile v-for="(item, index) in items" :key="item.id" >

  <v-list-tile-action>
    {{index+1}}.
  </v-list-tile-action>

  <v-tooltip bottom>
    <template v-slot:activator="{ on }">

      <v-list-tile-content v-on="on">
          <v-list-tile-title v-text="`${item.title}`"></v-list-tile-title>
      </v-list-tile-content>

    </template>
    <span>Tooltip</span>
  </v-tooltip>

</v-list-tile>
</v-list-tile-content>
</v-app>
</div>

功能代码：https://codepen.io/BernardoBernal/pen/dyYQXPj

【讨论】：