Vue JS组件来呈现复选框输入并发送回v-model。

Question

在我的Vue JS项目中，我试图创建一个通用组件，在页面上呈现一堆复选框。我需要将值发送回组件，以便在组件上附加一个v-model。

到目前为止，我的复选框都允许我选择true/false，但我只想返回一个真正的值，这意味着如果我选择了4个复选框中的2个，那么我的自定义组件上的v-model应该具有真的值。

我已经呈现了我的复选框，但是我很难让v-model正常工作，我哪里出错了？

<GroupedCheckboxes :options="editor.sources" v-model="source.isChecked" />

其构成部分是：

<template>
  <div>
    <div v-for="(checkbox, index) in options" :key="index">
      <input type="checkbox">
    </div>
  </div>
</template>

<script>
export default {
  props: ['options']
}
</script>

我的v-model需要从组中提取值，但不是

Answer 1

问题1: GroupedCheckboxes没有实现v-model

要使组件上的v-model工作，组件必须：

1. 接收value支柱1️⃣
2. 发出具有新值2️⃣的input事件，因为只有在选中任何复选框时，才希望该值为true，请使用Array.prototype.some()

问题2: GroupedCheckboxes没有实现复选框组

复选框组必须：

1. 具有Array 3️⃣类型的初始值
2. 具有相同的name 4️⃣

<template>
  <div>
    <div v-for="(checkbox, index) in options" :key="index">
      <label>
        <input
          type="checkbox"
          name="myCheckboxGroup" 4️⃣
          :value="checkbox"
          v-model="myValue"
          @change="$emit('input', myValue.some(v => v))" 2️⃣
        >
        {{ checkbox }}
      </label>
    </div>
  </div>
</template>

<script>
export default {
  props: [
    'options',
    'value', 1️⃣
  ],
  data() {
    return {
      myValue: [], 3️⃣
    }
  },
}
</script>

演示