Vuetify: [Documentation] prefer @change over @click on selection controls

[peteruithoven]

Environment

Vuetify Version: 2.2.6 and 2.2.8
Vue Version: 2.6.10
Browsers: Firefox 72.0
OS: Linux

Steps to reproduce

• Add Checkbox element
• Listen to click event

Expected Behavior

Click is triggered once after click

Actual Behavior

Click is triggered twice after click

Reproduction Link

Vuetify 2.2.6: https://codepen.io/peteruithoven/pen/OJPYmbm
Vuetify 2.2.8: https://codepen.io/peteruithoven/pen/XWJwRqL

Other comments

One workaround seems to be to stop the click event's propagation by adding .stop.

[peteruithoven]

I can also reproduce this with Vuetify 2.2.8:
https://codepen.io/peteruithoven/pen/XWJwRqL

[KaelWD]

You should be using input-value and @change here anyway (or v-model).

[peteruithoven]

@KaelWD but @change isn't listed in the API:
https://vuetifyjs.com/en/components/selection-controls#api

I tried adding it in the same codepen, but it doesn't seem to be triggered:
https://codepen.io/peteruithoven/pen/XWJwRqL

(I can't easily use v-model for my use case)

[KaelWD]

The bound click event is overwriting the internal one so it breaks change, if you remove @click it works correctly.

Related: #5968

[peteruithoven]

@KaelWD you are right. Using only @change works perfectly. I've updated my example.

[douglasg14b]

Yeah, docs DEFINITELY need to note in bold that @click will trigger twice. This can cause some pretty unpleasant effects...

[KaelWD]

5968 has been fixed, docs need to note that you almost always want to be using @change instead of @click