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
}