CODEWITHSUNDEEP
vue.jsvuejs2vuetify.js
timmyLtus
timmyLtus

Reputation: 274

Vuetify: Using v-tooltip within a v-for?

I am trying to use the v-tooltip in a v-for but I think my binding is incorrect, and blocking it from rendering. I've used this outside of the v-for and it works as expected:

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

Upvotes: 0

Views: 2531

Answers (1)

Lazac92
Lazac92

Reputation: 145

You should use v-bind and v-on inside the template like this:

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

In your example:

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

Upvotes: 3

Related Questions