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 prop 已更改为 modelValue 并且发出的事件 input 已更改为 update:modelValue :

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

对于脚本设置语法，请检查我的回答

Vue 在组件中绑定多个复选框

Vue multiple checkboxes with binding in component

vue.js

vuejs3

vue-script-setup