如何使用一个 v-model 从组件中获取选定的复选框数组 [重复]答案

【问题标题】：How to get the selected checkbox array from component using one v-model [duplicate]如何使用一个 v-model 从组件中获取选定的复选框数组 [重复]
【发布时间】：2020-10-27 06:43:49
【问题描述】：

我想要实现的是 Vue 文档中复制的内容 - 多个复选框，绑定到同一个数组：

https://vuejs.org/v2/guide/forms.html#Checkbox

结果是一个选定项的数组。

我目前有以下复选框组件：

<template>
  <div :class="$style.root">
    <input
      :checked="checked"
      @change="$emit('change', $event.target.checked)"
      :id="id"
      :value="value"
      :class="$style.defaultInput"
      type="checkbox"
    >
    <label :for="id" :class="$style.defaultLabel">
      <div :class="$style.standart" v-if="type === 'standart'">
        <span :class="$style.checkBox">
          <svg
            :class="$style.checkMark"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
        </span>
        <span :class="$style.labelText">{{ label }}</span>
      </div>
    </label>
  </div>
</template>
<script>
export default {
  model: {
    prop: "checked",
    event: "change"
  },
  props: {
    id: {
      type: String,
      required: true
    },
    label: {
      default: "Label",
      type: String
    },
    value: null,
    type: {
      default: "standart",
      type: String
    },
    color: {
      default: "green",
      type: String
    },
    checked: {
      default: false,
      type: Boolean
    }
  }
};
</script>

我在我的页面上这样使用它：

<base-checkbox
  class="mb-3"
  id="termsA"
  value="Item A"
  v-model="selectedOne"
  label="Item A"
/>

import Checkbox from "./components/Checkbox"

到目前为止，我得到的只是布尔值 true/false，并且所有这些都是同时被选中的。

代码示例可以在Codesandbox - Checkbox component v-model查看

【问题讨论】：

标签： javascript vue.js checkbox v-model

【解决方案1】：

当@change 事件发生时，您发出了错误的值，这就是您收到boolean 的原因

<input
  :checked="checked"
  @change="$emit('change', $event.target.checked)"  <===== Here
  :id="id"
  :value="value"
  :class="$style.defaultInput"
  type="checkbox"
>

也许你想发出标签或其他东西，这里$event.target.checked你发出它是否被选中

【讨论】：