I'm trying to move a checkbox to a child component, but I can't get it to update the data stored in the parent.

Parent:

<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: "[email protected]",
  doYouAgree: false,
});

export default {
  name: "App",
  components: {
    CheckboxComponent,
  },
  setup() {
    return {
      profile,
    };
  },
};
</script>

Child:

<template>
  <div >
    <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>

In the following sandbox, I am expecting the false to turn to true when the box is checked: https://codesandbox.io/s/gifted-worker-vm9lyt?file=/src/App.vue

CodePudding user response：

There's a couple of problems here:

1. $event.target.value is a string rather than a boolean. Change this to $event.target.checked
2. Your parent is listening to input but your child is emitting update:modelValue. Save yourself a lot of hassle and use v-model in the parent:

<CheckboxComponent
  v-model="profile.doYouAgree"
  label="Do you agree?"
/>