时间戳

首页 > 解决方案 > Vuetify：在 v-for 中使用 v-tooltip？

vue.js - Vuetify：在 v-for 中使用 v-tooltip？

问题描述

我正在尝试在 v-for 中使用 v-tooltip，但我认为我的绑定不正确，并阻止了它的渲染。我在 v-for 之外使用了它，它按预期工作：

<div v-for="item in items">
    <v-tooltip bottom>
        <template v-slot:activator="{ on, attrs }">
            Hover to View
        </template>
        <span>{{ item.name }} </span>
    </v-tooltip>
</div>

标签： vue.jsvuejs2vuetify.js

解决方案

你应该在里面使用v-bind和这样的：v-ontemplate

<span v-bind="attrs" v-on="on">Hover to View</span>

在您的示例中：

<div v-for="item in items" :key="item.id">
  <v-tooltip bottom>
    <template v-slot:activator="{ on, attrs }">
        <span v-bind="attrs" v-on="on">Hover to View</span>
    </template>
    <span>{{ item.name }}</span>
  </v-tooltip>
</div>

推荐阅读