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?

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)
}

The easy way to access whether the checkbox is checked or not after clicking is to check it value. If it is null or empty array, then you can assume that its not checked. It depends on how you initialised the variable. This is the safest way to get what you want.

<v-checkbox
   v-for="(el, index) in checkboxes"
   :key="index"
   v-model="checkbox[index]"
   :value="el"
   :label="`Checkbox ${index}`"
   @change="valueChanged($event, index)"
></v-checkbox>


new Vue({
  el: '#app',
  data () {
    return {
      checkboxes: ['Opt 1', 'Opt 2', 'Opt 3', 'Opt 4'],
      checkbox: [],
    }
  },
  methods: {
    onChange(val, i) {
       console.log(val, i, this.checkbox)
        if (val === null || val.length === 0) { // Custom checks in this
          console.log('Unchecked')
        } else {
          console.log('Checked')
        }
      }
  }
})

If you really need access to the element, then you can use ref to get the component. Then try to find the input element inside the component. And then find the checked value of that input element. But depending on how the library is implemented, you might not get the right value for $refs.checkbox.$el.target.checked.

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

Related

Recent Posts