I'm attempting to implement a customized checkbox using Vue 3 and the composition API based on this example. However, despite confirming through devtools that all my props and bound data are successfully passed from the parent component to the child component, the visual state of the checkbox does not change when it is checked:
Parent Component:
<template>
<div class="flex">
<div class="flex">
<span>Detected Language</span>
<BaseCheckBox
v-model:checked="translationOn"
fieldId="translate"
label="Translate"
class="ml-4"
/>
</div>
</div>
</template>
<script>
import BaseCheckBox from './BaseCheckBox.vue'
import { ref } from 'vue'
export default {
setup() {
const translationOn = ref(false)
return {
translationOn,
}
},
components: { BaseCheckBox },
}
</script>
Child Component:
<template>
<div class="flex">
<input
@input="(event) => $emit('update:checked', event.target.checked)"
type="checkbox"
:checked="checked"
:id="fieldId"
class="mr-2 hidden"
/>
<label
:for="fieldId"
class="flex flex-row items-center cursor-pointer select-none"
>
<i
class="fa mr-1"
:class="{
'fa-check-square text-blue-600': checked,
'fa-square border-2 border-gray-700 text-white': !checked,
}"
></i>
{{ label }}
</label>
</div>
</template>
<script>
export default {
props: {
label: String,
fieldId: {
type: String,
required: true,
},
checked: {
type: Boolean,
},
},
}
</script>
Even though the "translationOn" property in the parent component and the "checked" prop in the child component appear to update correctly upon clicking the checkbox, the Font Awesome classes that should dynamically change based on these values remain constant:
<i
class="fa mr-1"
:class="{
'fa-check-square text-blue-600': checked,
'fa-square border-2 border-gray-700 text-white': !checked,
}"
></i>
Curiously, manually altering the value in the line of code within the parent component like so:
const translationOn = ref(true)
From "true" to "false" or vice versa has the desired effect, unlike clicking the checkbox. Despite observing correct behavior in terms of value changes, this discrepancy persists.
Any assistance would be greatly appreciated. Thank you!