{"action":"created","issue":{"url":"https://api.github.com/repos/vuetifyjs/vuetify/issues/3554","repository_url":"https://api.github.com/repos/vuetifyjs/vuetify","labels_url":"https://api.github.com/repos/vuetifyjs/vuetify/issues/3554/labels{/name}","comments_url":"https://api.github.com/repos/vuetifyjs/vuetify/issues/3554/comments","events_url":"https://api.github.com/repos/vuetifyjs/vuetify/issues/3554/events","html_url":"https://github.com/vuetifyjs/vuetify/issues/3554","id":304537717,"number":3554,"title":"[Bug Report] Clicking v-switch label doesn't fire registered @click handler","user":{"login":"mjy90","id":35304678,"avatar_url":"https://avatars0.githubusercontent.com/u/35304678?v=4","gravatar_id":"","url":"https://api.github.com/users/mjy90","html_url":"https://github.com/mjy90","followers_url":"https://api.github.com/users/mjy90/followers","following_url":"https://api.github.com/users/mjy90/following{/other_user}","gists_url":"https://api.github.com/users/mjy90/gists{/gist_id}","starred_url":"https://api.github.com/users/mjy90/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mjy90/subscriptions","organizations_url":"https://api.github.com/users/mjy90/orgs","repos_url":"https://api.github.com/users/mjy90/repos","events_url":"https://api.github.com/users/mjy90/events{/privacy}","received_events_url":"https://api.github.com/users/mjy90/received_events","type":"User","site_admin":false},"labels":[{"id":440781591,"url":"https://api.github.com/repos/vuetifyjs/vuetify/labels/bug","name":"bug","color":"ee0701","default":true}],"state":"open","locked":false,"assignee":{"login":"johnleider","id":9064066,"avatar_url":"https://avatars3.githubusercontent.com/u/9064066?v=4","gravatar_id":"","url":"https://api.github.com/users/johnleider","html_url":"https://github.com/johnleider","followers_url":"https://api.github.com/users/johnleider/followers","following_url":"https://api.github.com/users/johnleider/following{/other_user}","gists_url":"https://api.github.com/users/johnleider/gists{/gist_id}","starred_url":"https://api.github.com/users/johnleider/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/johnleider/subscriptions","organizations_url":"https://api.github.com/users/johnleider/orgs","repos_url":"https://api.github.com/users/johnleider/repos","events_url":"https://api.github.com/users/johnleider/events{/privacy}","received_events_url":"https://api.github.com/users/johnleider/received_events","type":"User","site_admin":false},"assignees":[{"login":"johnleider","id":9064066,"avatar_url":"https://avatars3.githubusercontent.com/u/9064066?v=4","gravatar_id":"","url":"https://api.github.com/users/johnleider","html_url":"https://github.com/johnleider","followers_url":"https://api.github.com/users/johnleider/followers","following_url":"https://api.github.com/users/johnleider/following{/other_user}","gists_url":"https://api.github.com/users/johnleider/gists{/gist_id}","starred_url":"https://api.github.com/users/johnleider/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/johnleider/subscriptions","organizations_url":"https://api.github.com/users/johnleider/orgs","repos_url":"https://api.github.com/users/johnleider/repos","events_url":"https://api.github.com/users/johnleider/events{/privacy}","received_events_url":"https://api.github.com/users/johnleider/received_events","type":"User","site_admin":false}],"milestone":{"url":"https://api.github.com/repos/vuetifyjs/vuetify/milestones/22","html_url":"https://github.com/vuetifyjs/vuetify/milestone/22","labels_url":"https://api.github.com/repos/vuetifyjs/vuetify/milestones/22/labels","id":3162183,"number":22,"title":"Sprint 6","description":null,"creator":{"login":"johnleider","id":9064066,"avatar_url":"https://avatars3.githubusercontent.com/u/9064066?v=4","gravatar_id":"","url":"https://api.github.com/users/johnleider","html_url":"https://github.com/johnleider","followers_url":"https://api.github.com/users/johnleider/followers","following_url":"https://api.github.com/users/johnleider/following{/other_user}","gists_url":"https://api.github.com/users/johnleider/gists{/gist_id}","starred_url":"https://api.github.com/users/johnleider/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/johnleider/subscriptions","organizations_url":"https://api.github.com/users/johnleider/orgs","repos_url":"https://api.github.com/users/johnleider/repos","events_url":"https://api.github.com/users/johnleider/events{/privacy}","received_events_url":"https://api.github.com/users/johnleider/received_events","type":"User","site_admin":false},"open_issues":7,"closed_issues":22,"state":"open","created_at":"2018-03-05T14:56:36Z","updated_at":"2018-03-13T13:01:47Z","due_on":null,"closed_at":null},"comments":1,"created_at":"2018-03-12T20:59:12Z","updated_at":"2018-03-13T15:06:49Z","closed_at":null,"author_association":"NONE","body":"### Versions and Environment\r\n**Vuetify:** 1.0.6\r\n**Vue:** 2.5.15\r\n**Browsers:** Chrome 65.0.3325.146\r\n**OS:** Linux x86_64\r\n\r\n### Steps to reproduce\r\nCreate 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.\r\n\r\nIn the attached Codepen, clicking the button toggles the visibility of the message below it, whereas clicking the label toggles the button.\r\n\r\n### Expected Behavior\r\nWhen using a custom click handler, it should be hit whether I click the button or the label.\r\n\r\n### Actual Behavior\r\nClicking 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.\r\n\r\n### Reproduction Link\r\n[https://codepen.io/anon/pen/JLYWyZ](https://codepen.io/anon/pen/JLYWyZ)\r\n\r\n### Other comments\r\nI'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.\r\n\r\nI'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.\r\n\r\n\r\n<!-- generated by vuetify-issue-helper. DO NOT REMOVE -->"},"comment":{"url":"https://api.github.com/repos/vuetifyjs/vuetify/issues/comments/372698280","html_url":"https://github.com/vuetifyjs/vuetify/issues/3554#issuecomment-372698280","issue_url":"https://api.github.com/repos/vuetifyjs/vuetify/issues/3554","id":372698280,"user":{"login":"mjy90","id":35304678,"avatar_url":"https://avatars0.githubusercontent.com/u/35304678?v=4","gravatar_id":"","url":"https://api.github.com/users/mjy90","html_url":"https://github.com/mjy90","followers_url":"https://api.github.com/users/mjy90/followers","following_url":"https://api.github.com/users/mjy90/following{/other_user}","gists_url":"https://api.github.com/users/mjy90/gists{/gist_id}","starred_url":"https://api.github.com/users/mjy90/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mjy90/subscriptions","organizations_url":"https://api.github.com/users/mjy90/orgs","repos_url":"https://api.github.com/users/mjy90/repos","events_url":"https://api.github.com/users/mjy90/events{/privacy}","received_events_url":"https://api.github.com/users/mjy90/received_events","type":"User","site_admin":false},"created_at":"2018-03-13T15:06:49Z","updated_at":"2018-03-13T15:06:49Z","author_association":"NONE","body":"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.\r\n\r\nIn 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](https://codepen.io/anon/pen/NYxGKY) with an example of that, with a `setTimeout()` to illustrate going through other avenues to do the actual modification of the data."}}
{"actor":{"display_login":"mjy90"}}