Как получить выбранный массив флажков из компонента с помощью одной v-модели

Я пытаюсь достичь того, что воспроизведено в документации 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 - v-model компонента Checkbox


person Fabio Zanchi    schedule 07.07.2020    source источник


Ответы (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 вы выдаете, проверено ли оно

person Daniel Rodríguez Meza    schedule 07.07.2020