CODEWITHSUNDEEP
vue.js
BleddP
BleddP

Reputation: 271

Vue v-model does not select value on checkbox

I'm fairly new to Vue and I've researched as much as I could, but cannot find a solution to this strange issue. I'm building a filter function for an online shop, and one section allows filtering based on values with a checkbox.

My vue template is as following:

<template>
  <div>
    <h3>{{data.filterLabel}}</h3>
    <ul>
      <li v-for="(item, index) in data.options" :key="index">
        <input v-model="values" type="checkbox" :id="item" :value="item" :index="index" />
        <label class="products__label products__capitalize" :for="item">{{ item }}</label>
      </li>
    </ul>
  </div>
</template>

I am getting the options from a database, and loop through the data.options array with v-for. I have created a new empty array in

data() {
    return {
      values: []
    };
  },

as in the form-bindings example on the vue.js website here: https://v2.vuejs.org/v2/guide/forms.html#Checkbox

My script is as following:

<script>
export default {
  name: "CheckBoxFilter",
  data() {
    return {
      values: []
    };
  },
  props: {
    data: Object,
    filterCheckBox: Function
  },
  watch: {
    values: function(value) {
      const optionRange = JSON.parse(JSON.stringify(this.values));
      this.$emit("filterCheckBox", this.data.filterValue, optionRange);
    }
  }
};
</script>

For some strange reason, the $emit function works perfectly fine, and the array of products is filtered correctly in the UI. But when I check a value in the checkbox, the checkbox is not ticked. How is it possible that the checkbox is not ticked, while at the same time it is clearly correctly filtering the values?

I even looked at the :checked value with $event.target.checked which also correctly returns true or false, but the checkbox is still not ticked in the UI.

I have the same issue with radio buttons.

There are no issues with the <input type="text"> and also no issues with a <select>.

Has anyone experienced this before and if so what is the solution?

Thanks!

Upvotes: 0

Views: 1187

Answers (1)

Jonathan Weibel
Jonathan Weibel

Reputation: 134

I tested and the UI displays the checked/unchecked checkboxes properly. Which version of Vue do you use? I'm not sure of what you want to do, but I think it would be cleaner to expose your values through a computed property:

export default {
  name: "CheckBoxFilter",
  props: {
    data: Object,
  },
  data() {
    return {
      internalValues: [],
    };
  },
  computed: {
    values: {
      get() {
        return this.internalValues;
      },
      set(newVal) {
        this.internalValues = newVal;
        this.$emit("filterCheckBox", this.data.filterValue, [...newVal]);
      },
    },
  },
};
</script>

With your current implementation, the values change are not observable and the filterCheckBox event is never emitted.

EDIT: I also don't understand why you set a filterCheckBox prop, it is not React ;)

Upvotes: 1

Related Questions