<template> <div> <span v-html="title" /> <input @change.preventDefault="change" type="checkbox" id="check" v-model="checked" class="toggle" /> <label for="check">&ensp;{{ status }}</label> </div> </template> <script lang="ts" setup> import { ref, reactive } from 'vue' interface Props { title?: String | Number | null; required?: boolean; checked?: boolean; } const props = withDefaults(defineProps<Props>(), { title: null, required: false, checked: undefined, }); const emit = defineEmits([ "onChange"]); const checked = ref(props.checked) const status = ref(checked.value ? 'true' : 'false') const value = reactive({ }) const change = () => { status.value = checked.value ? 'true' : 'false'; emit("onChange", checked.value) } </script>

Así que estoy usando este componente de casilla de verificación personalizado y tengo tres de ellos en la misma página. Cuando hago clic en el primero, la acción de la casilla de verificación y el cambio de etiqueta están bien, pero cuando marco la segunda o tercera casilla de verificación, la acción de la casilla de verificación y el cambio de etiqueta se muestran en la primera en lugar de en la que estaba marcada.

¿Cómo puedo hacer que este componente sea más funcional para que cada casilla de verificación realice su propia acción, independientemente de las demás?