使用 Vuetify 在菜单激活器中向 v-on 添加修饰符 [英] Add modifier to v-on in menu activator using Vuetify

问题描述

简化示例:

<v-list>
  <v-list-item :to="bla/bla">
    <v-menu>
      <template v-slot:activator="{on}">
        <v-btn v-on.prevent="on"/> // I tried .stop, .stop.prevent, self.prevent, prevent.stop
      </template>
      <div> bla </div>
    <v-menu>   
  </v-list-item>
</v-list>

所以你可以看到子事件 v-on 触发 v-menu 并显示这个 div.但它也会触发 parent :to 事件.有什么想法吗?

So as you can see child event v-on triggers v-menu and shows this div. But it also triggers parent :to event. Any ides?

推荐答案

尝试破坏 on 插槽 prop 如下:

Try to destruct the on slot prop as follows :

  <template v-slot:activator="{ on: { click } }">
        <v-btn  v-on:click.stop.prevent="click">
          open
          </v-btn>
      </template>

这篇关于使用 Vuetify 在菜单激活器中向 v-on 添加修饰符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！