How to emit checked value in Vue with Vuetify

Question

How to emit the 'checked' value from a child to the parent in the right way?

My checkbox is a nested component that uses v-checkbox from Vuetify. I would like to emit the checked value to his parent. Now, I am doing that emitting $event and that works, because $emit contains the true/false value but I don't know why (I've thought that I need to emit $event.target.checked but this is undefined).

Checkbox.vue

<template>
  <v-checkbox color="primaryGreen" hide-details @change="$emit('change', $event)">
    <span slot="label" class="checkbox-label">
      <slot></slot>
    </span>
  </v-checkbox>
</template>

Form.vue (parent)

<v-layout id="different-address-checkbox">
  <v-flex>
   <checkbox @change="sth">
    <span>Different Address</span>
   </checkbox>
  </v-flex>
</v-layout>

export default {
  data() {
    return {
      differentAddress: false
    };
  },
  methods: {
    sth(value) {
      this.differentAddress = value;
    }
  }
};

I don't understand why $emit contains true/false instead of the whole event with event.target.checked and I am not sure what is the right way to emit the checked value from child to parent.

Answer 1

v-checkbox is not a native form element. It emits whatever the author of the Vuetify framework decided it would emit. In this case, a boolean.

You're correct that when working with form elements you usually need to access the value with $event.target.checked or $event.target.value, but this doesn't apply to custom components.

Here's the relevant part in Vuetify's source:

internalValue: {
    get () {
      return this.lazyValue
    },
    set (val) {
      this.lazyValue = val
      this.$emit(this.$_modelEvent, val)
    }
},

When the component's value changes, internalValue is pushed to the parent (your child component).