CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
stanimirsp
stanimirsp

Reputation: 3086

How to stop propagation in Vuetify v-switch?

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

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?

Upvotes: 5

Views: 6567

Answers (2)

stanimirsp
stanimirsp

Reputation: 3086

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>

Upvotes: 4

tao
tao

Reputation: 90188

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.

Upvotes: 7

Related Questions