Vuex getter not updating
In your case state.laptops.earmarks
is an array, and you are manipulating it by its array index state.laptops[index]
. Vue is unable to react to mutations on state arrays (by index). The documentation provides 2 workarounds for this:
// 1. use purpose built vue method:
Vue.set(state.laptops, index, laptop)
// 2. splice the value in at an index:
state.laptops.splice(index, 1, laptop)
Although it is documented, I'm thinking a giant neon glowing sign on that page that says "You will waste hours of productivity if you don't know this" would be a nice addition.
You can read more about this "caveat" here: https://v2.vuejs.org/v2/guide/list.html#Caveats
Apart from the Reactivity issue and Vue caveat, there could be another reason, You've introduced the local variable counter
in computed function, You can try using reduce
function as given.
withEarmarks: state => {
return state.laptops.reduce((acc, item) => {
if(item.earmarks.length > 0){
acc++;
}
return acc;
}, 0);
}
consider the @jpschroeder's answer in addition of this answer.