Reputation: 563
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.
Upvotes: 5
Views: 8240
Reputation: 1959
I had a very similar problem, complex data model and nested for-loops. I needed an easy way to get the v-checkbox which changed checked-change-state.
This is how I solved it:
<div v-for="unitLocation in groupedResources" v-bind:key="unitLocation.node.TelldusUnitLocation_Name">
<v-checkbox
@change="toggledLocation(unitLocation)"
v-model="unitLocation.node.checked"
:label="unitLocation.node.TelldusUnitLocation_Name"
hide-details
></v-checkbox>
<!-- more code here -->
</div>
(unitLocation
is a nested object itself with node
and children
-properties, but that's not important for the solution)
And then in my code:
methods: {
toggledLocation(args) {
debugger; /*see image below, console in chrome*/
}
}
Output in Chrome (I printed out the args
parameter in debug console in Chrome):
Upvotes: 0
Reputation: 4008
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).
Upvotes: 6