I have the below getter:
withEarmarks: state => { var count = 0; for (let l of state.laptops) { if (l.earmarks.length > 0) { count++; } } return count; }
And in a component, this computed property derived from that getter:
withEarmarks() { return this.$store.getters.withEarmarks; },
The value returned is correct, until I change an element within the laptops array, and then the getter doesn't update.
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://vuejs.org/v2/guide/list.html#Caveats
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With