Vuetify:在v-for中使用v-tooltip

Question

我试图在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>

Answer 1

您应该在template中使用v-bind和v-on，如下所示：

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