在vuetify模板中合并多个v-slot:activator和v-on

时间:2020-03-23 07:58:00

标签: vue.js vuetify.js

我正在尝试创建可重用的模式窗口,应通过在每个v-data-table行上按下一个图标来调用该窗口。此外,每个图标都应在鼠标悬停时提供工具提示。

根据vuetify文档,两个操作都使用相同的构造:v-slot:activator="{ on }"v-on="on"。问题是-Vue / Vuetify中是否有一种方法可以合并此构造并获得所需的行为?

此刻,我找到了一种通过添加附加<a>标签来获取所需内容的方法:

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

但是也许有任何方法可以合并v-slot:activatorv-on而无需附加<a>标签?

Codesandbox with current behavior

0 个答案:

没有答案