V model on array of objects

Hi, how can I make this

Child.vue
props: {
    options: {
      type: Array,
      default: () => []
      /* example: 
     [
      {
        value: "A",
        label: "Alabama"
      },
      {
        value: "N",
        label: "Nebraska"
      }
    ] */
    },
    modelValue: {
      type: Array,
      default: () => []
      /* example:
      [
        {
          value: "A",
          label: "Alabama"
        }
      ]
      */
    }

work with checkbox group v-model, like so:

Child.vue // template part

 <div v-for="option in options"><input type="checkbox" v-model="WHAT?" ></div>

so the parent can use is like so:

Parent.vue // template part
<Child :options="options" v-model="selected" />

aleahy

3 years ago

Level 25

Since you want to use v-model on a custom component, you need to be able to emit the update:modelValue event when the data changes. So just create a data variable in your custom component that you use as the v-model in your checkboxes. Then you just need to emit the update:modelValue event when it changes.

This is demonstrated in the docs here: https://vuejs.org/guide/components/events.html#usage-with-v-model

Eg: You could have something like this (I'm assuming you're using Vue3):

emits: ['update:modelValue'],
data() {
   selectedValues: this.modelValue,
},
watch: {
   selectedValues(newValues) {
      this.$emit('update:modelValue', newValues);
   }
}

Please or to participate in this conversation.