CODEWITHSUNDEEP
vue.jsvuejs2
user9140414
user9140414

Reputation: 13

Why are checkboxes not reset by v-model?

This is what i have:

  1. Template

    <div
  v-for="(filter, index) in filtersList"
  :key="index"
  class="option-block"
>
  <label
    v-for="value in filter.values"
    :key="value.id"
    class="option-block__container"
  >
    {{ value.title }}
    <input
      type="checkbox"
      v-model="filtersValues[filter.name]"
      :value="value.value"
    >
    <span class="option-block__checkmark"></span>
  </label>
</div>

  2. And the part of my vue code:

    data() {
  return {
    filtersList: {},
    filtersValues: {}
  }
},
beforeMount() {
  this.loadInitData();
  this.initFilters();
},
methods: {
  loadInitData() {
    const data = JSON.parse(this.$el.getAttribute('data-data'));

    this.filtersList = data.filters;
  },
  initFilters() {
    for (let i in this.filtersList) {
      if (!this.filtersList.hasOwnProperty(i)) {
        continue;
      }
      this.filtersValues[this.filtersList[i].name] = [];
    }
  }
}

It works, but when i call initFilters() method again (for reseting) checkboxes are still selected, and i don't know why.

Upvotes: 1

Views: 773

Answers (2)

Kwesi Smart
Kwesi Smart

Reputation: 420

Where did filter.values come from in line 2 of template?

Anyways vue would not be able to track the changes you are making (judging from the visible code)

There are some caveats to vue 2's reactivity. Check here for more info.

TLDR; you will need to declare anything you want to be made reactive in the component's data option upfront.

HTH

Upvotes: 0

Phil
Phil

Reputation: 164798

The way you are assigning new, empty arrays to filterValues is not reactive.

If you change your initFilters to assign an entire new value to filterValues, you don't need to worry about using Vue.set(). For example

initFilters() {
  this.filtersValues = this.filtersList.reduce((vals, { name }) => ({
    ...vals,
    [ name ]: []
  }), {})
}

Demo ~ https://jsfiddle.net/cjx09zwt/

Upvotes: 2

Related Questions