What's the correct method to pass the 'checked' value from a child component to its parent?
I have a checkbox nested within a component that utilizes v-checkbox from Vuetify. I want to send the checked value to its parent component. Currently, I am achieving this by emitting $event and it works correctly as $emit includes the true/false value. However, I am puzzled as I expected to emit $event.target.checked but this returns 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="updateAddress">
<span>Different Address</span>
</checkbox>
</v-flex>
</v-layout>
export default {
data() {
return {
differentAddress: false
};
},
methods: {
updateAddress(value) {
this.differentAddress = value;
}
}
};
I am uncertain why $emit provides true/false instead of the entire event with event.target.checked, and I am unsure of the correct approach to emit the checked value from child to parent.