Vuetify: [Bug Report] Clicking v-switch label doesn't fire registered @click handler

[mjy90]

Versions and Environment

Vuetify: 1.0.6
Vue: 2.5.15
Browsers: Chrome 65.0.3325.146
OS: Linux x86_64

Steps to reproduce

Create a v-switch with a label and a custom @click handler function. Clicking the button (the colored circle) will fire your custom handler. Clicking the label element (text to the right) will perform default toggling behavior and ignore the custom click handler.

In the attached Codepen, clicking the button toggles the visibility of the message below it, whereas clicking the label toggles the button.

Expected Behavior

When using a custom click handler, it should be hit whether I click the button or the label.

Actual Behavior

Clicking the switch element hits the custom handler as expected, but clicking the label does not. Instead, clicking the label performs default behavior (toggles the v-model) and does not hit the custom handler at all.

Reproduction Link

https://codepen.io/anon/pen/JLYWyZ

Other comments

I'm using Vuex, so best practices state that I shouldn't be manipulating store variables directly. A custom click handler is the easiest way to do this, as well as some other things I'm trying to accomplish. Workarounds that come to mind are much more labor-intensive and produce ugly/repetitive code.

I'm also unable to modify the click event on the label element to align with the functionality of the button. This approach would be repetitive and ugly anyway.

[johnleider]

Temporary workaround: https://codepen.io/johnjleider/pen/yKYpdz?editors=1111

[mjy90]

Thanks! I'd tried .native, but it was toggling the switch state, which in turn modified my Vuex store directly and yelled at me. This had dissuaded me from using .native, so seeing this is very helpful.

In case anyone in a similar circumstance comes across this, I addressed this by using the input-value prop in place of v-model. Here's a Codepen with an example of that, with a setTimeout() to illustrate going through other avenues to do the actual modification of the data.

[tvkit]

@mjy90 Good find, thanks! BTW, @change works for me (and also verified on your codepen

<v-switch
      label="Not"
       color="red"
       :input-value="myObject.someProp"
       @change="updateSomeProp"
       hide-details
 ></v-switch>

[mjy90]

Oo, good to know. I'm still kinda new to Vue, and I foresee getting lots of mileage out of this tip. Thanks!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord