I am implementing a checkbox component that emits an event to the parent component. However, in the parent component, I am facing an issue where I need to perform different actions based on whether the checkbox is checked or not, but it seems to only work for the first change.
Checkbox Component:
<template>
<input
type="checkbox"
:checked="ischecked"
@change="$emit('input', !ischecked)"
/>
</template>
<script>
props: {
checked:{
type: Boolean,
default: false
}
},
computed: {
ischecked(){
// Some checks with the checked prop, will return true or false
}
}
</script>
Parent Component
<template>
<checkbox-component
v-for="index in arrayOfData"
:checked="index.checked"
@input="test"
/>
</template>
<script>
(...)
methods: {
test:{
alert('change')
}
}
</script>
The issue lies in the fact that the alert message only appears during the initial change of the checkbox state. How can I ensure that it reacts to all subsequent checks and unchecks?
I attempted to use v-model on the parent component, but it disregards the initial value (index.checked) and relies solely on the component data. Unfortunately, setting my data property equal to index.checked is not feasible as index.checked is only accessible within the v-for loop.