vue.js - 通过 v-data-table 将 Vuetify 1.x v-slot 激活器转换为 2.x

Question

我有一段来自 Veutify 1.5.6 的工作代码，其中包括数据表内的一个图标，单击该图标时会显示一个菜单。单击激活器时，会显示已激活的列表。

我有这个例子的codepen

我想要相同的功能，但 Vuetify 2 没有slot="activator".

看起来他们v-slot:activator="{ on }"与模板标签一起使用，但我无法复制它。

这是我的尝试。

<v-data-table
  :headers="labels"
  :items="data"
  >
  <template v-slot:[`item.statusIcon`]="{ item }">
    <td style="cursor: pointer;">
      <v-icon :class="item.status">{{item.statusIcon}}
          <template v-slot:activator="{ on }">
              <v-list>
                  <v-list-item
                  v-on="on"
                  v-for="(status, index) in statusItems"
                  :key="index"
                  :class="status.title"
                  @click="setStatus(item, status.title)"
                  >{{ status.title }}></v-list-item>
              </v-list>
          </template>
      </v-icon>
    </td> 
  </template>
</v-data-table>

我肯定缺少一些小东西，我知道 v-icon 应该在模板下，但我一直收到这个错误

'v-slot' 指令必须由自定义元素拥有，但 'td'、'div'、'template' 不是

I found this thread, but still no help.

Any help would be appreciated

Answer 1

You should wrap the icon with v-menu component then use this icon as menu activator :

<v-menu offset-y>
       <template v-slot:activator="{ on, attrs }">
         <v-icon   v-on="on" :class="item.status">{{item.statusIcon}}
         </v-icon>
        </template>
        <v-list>
                  <v-list-item
                
                  v-for="(status, index) in statusItems"
                  :key="index"
                  :class="status.title"
                  @click="setStatus(item, status.title)"
                  >{{ status.title }}></v-list-item>
        </v-list>
</v-menu>