Currently, I am working with the Laravel framework in conjunction with Vue. In my project, there is a parent component that contains a child component. The child component includes a list of checkboxes, and upon checking or unchecking any checkbox, the corresponding value should be added to or removed from an array stored in data(). While I have successfully bound the input to the array in the child component, I have encountered an issue when emitting this array back to the parent component. The emitted data seems to be outdated, reflecting the result of the previously checked checkbox rather than the current one.
Child Component
<input type="checkbox" :id="color" :value="color" v-model="colors" @click="$emit('color', colors)" />
data() {
return {
colors: []
}
},
Parent Component
<Child v-on:color="updateColors" />
data() {
return {
colorList: []
}
}
updateColors(colors) {
this.colorList = colors;
}
Output: Upon clicking on "Red" for the first time, the emitted array is empty. Subsequently, if another color like "Blue" is clicked, the emitted array will only contain "Red".
I am seeking assistance in efficiently binding data and emitting it simultaneously. If this is not feasible, could someone guide me on how to introduce a delay so that the data can first be saved into the array before emitting the modified array back to the parent component?