Merging multiple v-slot:activator and v-on in vuetify templates

user_9275224 0
Viewed 879

I'm trying to create reusable modal window that should be called by pressing on an icon on each of the v-data-table row. Besides, each icon should have a tooltip on mouse hover.

According to vuetify docs, both actions is using same constructions: v-slot:activator="{ on }" and v-on="on". The question is - is there's a way in Vue/Vuetify to merge this constructions and get the desired behavior?

At the moment I found one way to get what I want by adding addtional <a> tag:

<template>
  <v-data-table :headers="headers" :items="tableItems">
    <template v-slot:item="props">
      <tr>
        <td>{{ props.item.text }}</td>
        <td>
          <some-modal>
            <template v-slot:activator="{ on }">
              <a v-on="on">
                <v-tooltip bottom>
                  <template v-slot:activator="{ on }">
                    <v-icon v-on="on" small class="mr-2">delete</v-icon>
                  </template>
                  <span>Tooltip message</span>
                </v-tooltip>
              </a>
            </template>
          </some-modal>
        </td>
      </tr>
    </template>
  </v-data-table>
</template>

But maybe there are any ways to merge v-slot:activator and v-on without an addtional <a> tag?

Codesandbox with current behavior

vuetify.js vue.js
1 Answers

Stumbled upon solution here, credits to @Yom T.

<v-menu>
  <template #activator="{ on: onMenu }">
    <v-btn v-on="onMenu">Menu Trigger</v-btn>

    <v-tooltip bottom>
      <template #activator="{ on: onTooltip }">
        <v-btn v-on="{ ...onMenu, ...onTooltip }">Menu Trigger with Tooltip</v-btn>
      </template>

      <span>Tooltip Content</span>
    </v-tooltip>
  </template>
</v-menu>
user_61184420
Related