使用 Vuetify 向菜单激活器中的 v-on 添加修饰符

Question

简化示例：

<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。但它也会触发父 :to 事件。有什么想法吗？

Answer 1

尝试on按如下方式破坏插槽道具：&nbsp; <template v-slot:activator="{ on: { click } }">&nbsp; &nbsp; &nbsp; &nbsp; <v-btn&nbsp; v-on:click.stop.prevent="click">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; open&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </v-btn>&nbsp; &nbsp; &nbsp; </template>

Answer 2

您在 v-on 上使用事件修饰符，在 v-on.click 上不使用。@click您可以通过单独向按钮添加修饰符来停止传播：<v-btn v-on="on" @click.stop.prevent />