Vue多个复选框与组件中的绑定

Question

我知道如何将多个复选框绑定到 Vue 中的数组。但是当我尝试将复选框放入它们自己的组件并使用 v-model 绑定到数组时，它似乎不起作用。有人知道为什么吗？

CheckboxSelection.vue

<template>
  <div  v-for="(check,index) in checks" :key="index">
    <input  v-model="model"
            :value="check.value"
            :id="check.id"
            type="checkbox" />
  </div>
</template>

<script>
export default {
  props: {
    value: Array
  },
  data(){
    return {
      model: this.value,
      checks: [
        {
          id: 1,
          label: 'Check 1',
          value: 'check1'
        },
        {
          id: 2,
          label: 'Check 2',
          value: 'check2'
        }
      ]
    }
  },
  watch: {
    model: function(val) {
      this.$emit("input", val)
    }
  },
}
</script>

用法：

<CheckboxSelection v-model="selection"></CheckboxSelection>

Answer 1

在 vue 3 中，value 属性已更改为 modelValue，并且发出的事件 input 已更改为 update:modelValue：

export default {
  props: {
    modelValue: Array
  },
emits:["update:modelValue"],
  data(){
  ....
  },
  watch: {
    model: function(val) {
      this.$emit("update:modelValue", val)
    }
  },
}

脚本设置语法请查看我的回答here