[Vuejs]-Checkbox state does not change on click

0👍

The problem occurs because you’re using an array for modeling the boolean state property named selected.
So, according to your code, at mutations side, on each mutation you’re pushing a new boolean value in the latest position of an array named selected.

Also, at get side, the get() function of your computed property returns the entire array as property to be displayed, resulting in an unchecked checkbox at client side.

So, assuming you need to deal with multiple checkboxes, in order to make the current one working properly you could write it as follows:

Vuex Store

let store = new Vuex.Store({
  state: {
   selected: []
  },
  mutations: {
    UPDATE_SELECTED: (state, value) => {
       //mutating the 0th array position of the selected property
       state.selected[0] = value
    }
  }
})

Computed property

computed: {
    selected: {
        get() {
       //getting the 0-index element of the array, assuming this checkbox is the 0th
            return this.$store.state.selected[0]
        },
        set(value) {
            this.$store.commit('UPDATE_SELECTED', value)
        }
    }
  }

Here you find a working fiddle.
Alternatively, if you need just to deal with a single checkbox in your application state, it’d be enough to model the state.selected property as a boolean. I mean, it would suffice to modify your Vuex state as follows:

state: {
   selected: true //or false if you expect unchecked checkbox as default
  }

Leave a comment