admin管理员组

文章数量:1026989

Simplified example:

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

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?

Simplified example:

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

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?

  • javascript
  • vue.js
  • vue-ponent
  • nuxt.js
  • vuetify.js
Share Improve this question edited Nov 30, 2021 at 19:46 Boussadjra Brahim 1 asked Sep 18, 2020 at 11:48 Borna MarinBorna Marin 1137 bronze badges 0
Add a ment  | 

2 Answers 2

Reset to default 6

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>

You are using the event modifier on v-on, no on v-on.click.

You can stop the propagation by adding @click with the modifier separately to the button:

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

Simplified example:

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

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?

Simplified example:

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

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?

  • javascript
  • vue.js
  • vue-ponent
  • nuxt.js
  • vuetify.js
Share Improve this question edited Nov 30, 2021 at 19:46 Boussadjra Brahim 1 asked Sep 18, 2020 at 11:48 Borna MarinBorna Marin 1137 bronze badges 0
Add a ment  | 

2 Answers 2

Reset to default 6

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>

You are using the event modifier on v-on, no on v-on.click.

You can stop the propagation by adding @click with the modifier separately to the button:

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

本文标签： javascriptAdd modifier to von in menu activator using VuetifyStack Overflow

版权声明：本文标题：javascript - Add modifier to v-on in menu activator using Vuetify - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745642018a2160804.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。