javascript - How to stop propagation in Vuetify v-switch? - Stack Overflow

admin管理员组

文章数量:1278789

I'm using Vuetify and I have v-data-table. When I click on row v-dialog must open. Also I have v-switch inside rows in my v-data-table. My problem es when I click on the v-switch it switches, but also propagates and opens my v-dialog. In my codepen I have three examples of v-switch click events.

• First is with @click.native.stop. Here I deal with propagation successfully, but click event is not only in the v-switch, but it covers the whole container (colored in red in example)
• My second try is with @change. Here switch event is activated only on v-switch toggle, but when I click on the v-switch the v-dialog opens too. So with @change it doesn't work properly too.
• The third try is with @change.stop, but without desired result, its same as my second try.

My question is - Is there a way to stop the propagation (with no side effects as in my first example) and when I click on v-switch to toggle only the switch , but not and the v-dialog behind?

I'm using Vuetify and I have v-data-table. When I click on row v-dialog must open. Also I have v-switch inside rows in my v-data-table. My problem es when I click on the v-switch it switches, but also propagates and opens my v-dialog. In my codepen I have three examples of v-switch click events.

• First is with @click.native.stop. Here I deal with propagation successfully, but click event is not only in the v-switch, but it covers the whole container (colored in red in example)
• My second try is with @change. Here switch event is activated only on v-switch toggle, but when I click on the v-switch the v-dialog opens too. So with @change it doesn't work properly too.
• The third try is with @change.stop, but without desired result, its same as my second try.

My question is - Is there a way to stop the propagation (with no side effects as in my first example) and when I click on v-switch to toggle only the switch , but not and the v-dialog behind?

• javascript
• vue.js
• vuetify.js

Share Improve this question Follow asked Apr 13, 2020 at 17:08 stanimirspstanimirsp 3,10622 gold badges2929 silver badges4242 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Just add @click.native.stop to your <v-switch>.

See it working: https://codepen.io/andrei-gheorghiu/pen/RwWPONL

Note: To limit the area in which the click is captured, you have to change .v-input--switchs display value to inline-block:

.v-input--switch {
  display: inline-block;
}

And you don't actually need to stop more than click, as the dialog only opens on click. As you can see, you can use Tab + Space to toggle the switch and the modal is not opening.

My workaround is to use @click.native.stop to stop propagation and @change for event

<v-switch
    v-model="item.isActive"
    @click.native.stop
    @change="toggleActive(item)">
</v-switch>

本文标签： javascriptHow to stop propagation in Vuetify vswitchStack Overflow