Vue 3 custom checkbox component with v-model and array of items

Question

Desperately in need of your help guys.

So basically I have a custom checkbox component whit a v-model. I use a v-for loop on the component to display checkboxes with the names from the array. In the parent component I have two columns Available and Selected. The idea is that if I check one of the boxes in the Available column it should appear on the Selected column. The problem is that it displays letter by letter and not the full name.

I am able to achieve the desired result without having a checkbox component, but since I will be needing checkboxes a lot throught my project I want to have a component for it.

Please follow the link for the code: CodeSandBox

Dont mind the difference in styling.

The problem:

The desired outcome:

StevenSiebert · Accepted Answer · 2021-10-07 14:16:41Z

4

There are two problems. The first problem is, that you have your v-model set to v-model="filter.filterCollection", so a checkbox you select will be stored into the array as a string and if you select another checkbox the string gets overwritten. The second problem is, that you call that stored string as an array. That causes, that your string, which is an array of letters, will be rendered for each letter. So 'Number' is like ["N", "u", "m", "b", "e", "r"].

To solve your problem, you need to store every selection with its own reference in your v-model. To cover your needs of correct listing and correct deleting you need to apply the following changes:

Your checkbox loop

<Checkbox
   v-for="(item, index) in items"
   :key="item.id"
   :label="item.name"
   :id="index"
   :isChecked="isChecked(index)" // this is new
   @remove-selected-filter="removeSelectedFilter" // This is new
   :modelValue="item.name"
   v-model="filter.filterCollection[index]" // Change this
/>

Your v-model

filter: {
        filterCollection: {} // Object instead of array
      }

Methods in FilterPopUp.vue

methods: {
    removeSelectedFilter(index) {
      delete this.filter.filterCollection[index];
    },
    isChecked(index) {
      return !!this.filter.filterCollection[index];
    }
  }

Your Checkbox.vue:

<template>
  <label>
    <p>{{ label }}</p>
    <input
      type="checkbox"
      :id="id"
      :value="modelValue"
      :checked="isChecked"
      @change="emitUncheck($event.target.checked)"
      @input="$emit('update:modelValue', $event.target.value)"
    />
    <span class="checkmark"></span>
  </label>
</template>

<script>
export default {
  name: "Checkbox",
  props: {
    modelValue: { type: String, default: "" },
    isChecked: Boolean,
    label: { type: String },
    value: { type: Array },
    id: { type: Number },
  },
  methods: {
    emitUncheck(event) {
      if(!event){
        this.$emit('remove-selected-filter', this.id);
      }
    }
  }
};
</script>

This should now display your items properly, delete the items properly and unselect the checkboxes after deleting the items.

edited Oct 7, 2021 at 14:16

answered Oct 7, 2021 at 11:52

StevenSiebert

1,4645 gold badges18 silver badges27 bronze badges

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

5 Comments

Tolbxela Over a year ago

And what about removing items? :-)

Fersek Over a year ago

Thank you very much for your help, but now I have another problem if I click on the remove item SVG on the selected column it removes the item but the box still stays checked in the available column. Any idea?

StevenSiebert Over a year ago

@Fersek As the answer of Tolbxela also causes that the checkbox still is checked, I edited my answer and this should work as you need.

Fersek Over a year ago

@StevenSiebert thank you removing with the SVG works now too, but now if i check and uncheck the BOX the item still stays on the selected column.

StevenSiebert Over a year ago

@Fersek Did a change on Checkbox.vue and checkbox loop in my answer. It should work now with deleting and unchecking. Let me know.

Tolbxela · Accepted Answer · 2021-10-07 12:45:39Z

2

StevenSiebert has correctly pointed to your errors.

But his solution is not complete, since the filters will not be removed from the collection when you uncheck one of them.

Here is my complete solution of your checkbox working as expected:

Checkbox.vue

<template>
  <label>
    <p>{{ label }}</p>
    <input
      type="checkbox"
      :id="id"
      v-model="checked"
      @change="$emit('change', { id: this.id, checked: this.checked})"
    />
    <span class="checkmark"></span>
  </label>
</template>

<script>
export default {
  name: "Checkbox",
  props: {
    modelValue: { type: Boolean, default: false },
    label: { type: String },
    id: { type: Number },
  },
  emits: ["change"],
  data() {
    return {
      checked: this.modelValue
    };
  }
};
</script>

FilterPopUp.vue

<template>
   ...
       <Checkbox
          v-for="(item, index) in items"
          :key="index"
          :label="item.name"
          :id="index"
          @change="onChange"
        />
  ...            

</template>

<script>
...
methods: {
    removeSelectedFilter(index) {
      this.filter.filterCollection.splice(index, 1);
    },
    onChange(args) {
      const {id, checked} = args;
      const item = this.items[id].name;
      if (checked) {
        if (this.filter.filterCollection.indexOf(item) < 0) {
         this.filter.filterCollection.push(item);
        }
      } else {
        this.filter.filterCollection = this.filter.filterCollection.filter( i=> i != item);
      }
    },
  },
...

Here is the working CodeSandbox:

https://codesandbox.io/s/pensive-shadow-ygvzb?file=/src/components/Checkbox.vue

Sure, there are many ways to do it. If somebody has a nicer and shorter way to do it, please post your solution. It will be interesting to look at it.

edited Oct 7, 2021 at 12:45

answered Oct 7, 2021 at 12:36

Tolbxela

5,2193 gold badges23 silver badges52 bronze badges

2 Comments

StevenSiebert Over a year ago

This causes that the checkbox still is checked after you delete the item from the list.

Tolbxela Over a year ago

Yes, you are right. I didn't want to do all the work myself. :-)

Collectives™ on Stack Overflow

Vue 3 custom checkbox component with v-model and array of items

2 Answers 2

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related