使用 Vuetify 将修饰符添加到菜单激活器中的 v-on答案

【问题标题】：Add modifier to v-on in menu activator using Vuetify使用 Vuetify 将修饰符添加到菜单激活器中的 v-on
【发布时间】：2021-01-05 08:39:29
【问题描述】：

简化示例：

<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 事件。有什么好办法吗？

【问题讨论】：

标签： javascript vue.js vue-component nuxt.js vuetify.js

【解决方案1】：

尝试破坏on slot prop，如下所示：

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

【讨论】：

【解决方案2】：

你在 v-on 上使用了事件修饰符，在 v-on.click 上没有。

您可以通过将带有修饰符的@click单独添加到按钮来停止传播：

<v-btn v-on="on" @click.stop.prevent />

【讨论】：