Estoy tratando de mover una casilla de verificación a un componente secundario, pero no puedo actualizar los datos almacenados en el principal.
Padre :
<template> <CheckboxComponent :value="profile.doYouAgree" label="Do you agree?" @input="profile.doYouAgree = $event.target.value" /> <div>{{ profile.doYouAgree }}</div> </template> <script> import CheckboxComponent from "./components/CheckboxComponent.vue"; import { reactive } from "vue"; const profile = reactive({ name: "A Name", email: "someone@me.com", doYouAgree: false, }); export default { name: "App", components: { CheckboxComponent, }, setup() { return { profile, }; }, }; </script>Niño :
<template> <div class="hello"> <label for="checkbox">{{ label }}</label> <input type="checkbox" :value="modelValue" right @input="$emit('update:modelValue', $event.target.value)" /> </div> </template> <script> export default { name: "CheckboxComponent", props: { label: { type: String, default: "", }, modelValue: { type: Boolean, }, }, }; </script>En el siguiente entorno limitado, espero que lo falso se convierta en verdadero cuando se marque la casilla:https://codesandbox.io/s/gifted-worker-vm9lyt?file=/src/App.vue
Hay un par de problemas aquí:
$event.target.value es una cadena en lugar de un valor booleano. Cambie esto a $event.target.checkedinput pero su hijo está emitiendo update:modelValue . Ahórrese muchas molestias y use v-model en el padre: <CheckboxComponent v-model="profile.doYouAgree" label="Do you agree?" />