0

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

0

1 Answer 1

0

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

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.