Vuetify: [Bug Report] onclick is not working on v-checkbox with label

[ericjohnston]

Versions and Environment

Vuetify: 0.17.3
Vue: 2.5.9
Browsers: Chrome 62.0.3202.94
OS: Windows 10

Steps to reproduce

Click the check box and notice that the count goes up, but but the checkbox doesn't change visible state.
Click the label and notice that the checkbox changes visible state, but the count does not increase.

Expected Behavior

Whether the checkbox or the label is clicked, the click event handler should be executed and the value of the property the checkbox is bound to should be updated.

Actual Behavior

If the label is clicked, the property value is updated, but the click event handler is not executed.
If the checkbox is clicked, the click event handler is executed, but the property value is not updated.

Reproduction Link

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

[KaelWD]

Use @click.native

[khouloud]

Hi i'm having the same issue here what was the fix please?

[ericjohnston]

@khouloud Changing on:click to @click.native worked for me. I just didn't understand the difference between the two.

Here are links to information from vuejs.org related to this:

https://vuejs.org/v2/guide/migration.html#Listening-for-Native-Events-on-Components-with-v-on-changed
https://vuejs.org/v2/guide/components.html#Using-v-on-with-Custom-Events
https://vuejs.org/v2/guide/components.html#Binding-Native-Events-to-Components

[ericjohnston]

The original issue what that I used v-on:click instead of @click.native. I
can't reproduce the issue you're seeing where the counter stops working if
the item.selected div is removed. Here are a couple of codepens with the
corrected click binding for reference:

With item.selected div: https://codepen.io/ericjohnston/pen/gBgLzv
Without the item.selected div: https://codepen.io/ericjohnston/pen/bmgBmm

If you have a codepen that shows the problem saved, I can take a look at it
and see if I can suggest something. Note that I did have an issue with
codepen itself not running the javascript a couple of times. Making an
arbitrary change and changing it back fixed that. It wasn't related to the
code itself.

On Mon, Oct 8, 2018 at 7:11 PM Rodrigo Abbás [e-mail]
wrote:

@ericjohnston https://github.com/ericjohnston Hi, I know it's a little
bit late but, in your codepen, if you remove this:

item.selected:
{{item.selected}}

, the div that prints the counting stop working.
I'm having a similar issue trying to print the v-model. Why is this
happening?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/vuetifyjs/vuetify/issues/2673#issuecomment-428008062,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AJ5c1na0tcMICyyGaUMNbAhmZCGcpcCvks5ui9u5gaJpZM4QvxKL
.