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

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

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