How to get Vuetify checkbox event.target.checked and event.target.value?

Question

How to get Vuetify checkbox event.target.checked and event.target.value?

I'm using Vuetify's checkbox in my app. When the user checks/unchecks it, I want to get the checked and the value properties.

I realize that it is not a native checkbox element, so I don't have access to event.target.checked or event.target.value, but surely there must be a way to do that. I tried the following:

<p v-for="(linkType, index) in linkTypes" v-if='linksLoaded'>
    <v-checkbox
        color="info"
        :label="linkType"
        :value="linkType"
        v-model="checkedLinks"
        @click="onCheckboxClicked($event)"></v-checkbox>
</p>

...
onCheckboxClicked: function(e) {
  console.log(e);
},

For some reason it printed a mouse event TWICE and the checkbox itself didn't change (the check mark wasn't unchecked).

@click.native printed the same mouse event, but once.

I tried @change="onCheckboxClicked" - that printed the v-model.

So is there a way to do that?

Answer 1

I see that you are looping without binding a key, and inside you have v-model which is hooked to a single variable. So, whenever some checkbox is changed all others will update simultaneously. So you need new v-model for each checkbox. Why not add another property in linkTypes so you can v-model="linkType.checked".

change is the name of the event which gets triggered whenever checkbox value is changed and value is passed as a parameter.

<v-checkbox
    @change="checkboxUpdated"
    color="info"
    :label="linkType"
    :value="linkType"
    v-model="checkedLinks"
    @click="onCheckboxClicked($event)"></v-checkbox>

and in methods you need

checkboxUpdated(newValue){
  console.log(newValue)
}