Vue watcher checked all checkbox when user deselect all?

Question

I use an array ['one', 'two', 'three'] to create combo box and binding with v-model selectValue, and then add watcher on that v-model to check all the checkbox when the user deselects all options

watch: {
  selectValue(newVal) {
    if(newVal.length===0)
       this.selectValue = ['one', 'two', 'three']
  }
}

When I log the value out. It shows that the selectValue value contains three values ['one', 'two', 'three'], but in UI the last deselect checkbox not being checked, but when I wrap around the assign statement with setTimeout it works (without time out). Is there any other options to do this. Should I use setTimeout like current?

Try this.$set(this, 'selectValue', ['one', 'two', 'three']) in place of this.selectValue = ['one', 'two', 'three'] — Shivam Singh

ellisdod ellisdod · Accepted Answer · 2020-03-27T09:25:20

You can use a proxy computed value with a setter:

data: () => ({
    items: ['foo', 'bar', 'fizz', 'buzz'],
    value : []
  }),
computed : {
    _value : {
      get () {
        return this.value
      },
      set (val) {
        this.value = val.length ? val : this.items
      },
    }
  }

then link your v-model to your proxy computed value:

<v-select
   v-model="_value"
   :items="items"
   multiple
></v-select>

working example: https://codepen.io/ellisdod/pen/poJqvgJ

Vue watcher checked all checkbox when user deselect all?

1 Answers