How to get the selected checkbox array from component using one v-model

Question

What I'm trying to achieve is what's reproduced oin the Vue documentation - Multiple checkboxes, bound to the same Array:

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

Where the result is an array of selected items.

I currently have the following checkbox component:

<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>

And I'm using it on my page like this:

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

import Checkbox from "./components/Checkbox"

All I got so far is the Booleans true/false and all being selected at the same time.

Code sample can be viewd on Codesandbox - Checkbox component v-model

score 0 · Answer 1 · answered Jul 07 '20 at 04:18

You're emitting the wrong value when the @change event happens, that's why you're getting a boolean

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

Maybe you want to emit the label or something else, here $event.target.checked you're emitting whether it's checked

How to get the selected checkbox array from component using one v-model

1 Answers1