Vuex model update won't reload computed property

Question

I have the following component to quickly configure stops on a delivery/pickup route and how many items are picked up and dropped

and this is the data model, note the 2 is the one next to 'a' on the previous image.

If a click the + or - button, in the first item, it behaves as expected,

But second item doesn't work as expected

I've already checke a couple of posts on object property update likes this ones

Is it possible to mutate properties from an arbitrarily nested child component in vue.js without having a chain of events in the entire hierarchy?

https://forum.vuejs.org/t/nested-props-mutations-hell-internet-need-clarification/99346 https://forum.vuejs.org/t/is-mutating-object-props-bad-practice/17448

among others, and came up with this code:

ADD_ITEM_TO_SELECTED_STOP(state, payload) {
      let count = state.selectedStop.categories[payload.catIndex].items[payload.itemIndex].count;
      const selectedCat = state.selectedStop.categories[payload.catIndex];
      const currentItem = selectedCat.items[payload.itemIndex];
      currentItem.count = count + 1;
      selectedCat.items[payload.itemIndex] = currentItem;
      Vue.set(state.selectedStop.categories, payload.catIndex, selectedCat);
    },

and as the button event:

addToItem(item) {
      this.$store.dispatch("addItemToSelectedStop", {
        catIndex: item.catIndex,
        itemIndex: item.itemIndex
      })
    },

And finally my computed property code:

items() {
      let finalArray = [];
      this.selectedStop.categories.forEach(
        (cat, catIndex) => {
          let selected = cat.items.filter((item) => item.count > 0 );
          if (selected.length > 0) {
            //here we add the catIndex and itemIndex to have it calling the rigth shit
            selected = selected.map(val => {
              let itemIndex = cat.items.findIndex( itemToFind => itemToFind.id === val.id);
              return {
                ...val,
                catIndex: catIndex,
                itemIndex: itemIndex,

              }})
            finalArray = finalArray.concat(selected);
          }
        });
      return finalArray;
    }

What confuses me the most is that I have almost the same code in another component, and there it's working as expected, and although the model is changed, the computed property is only recalculated on the first item,

user_929646 · Answer

After reading this gist and taking a look again at the posts describing this kind of issue, I decided to give it a try and just make a copy of the whole stored object not just the property, update it, then set it back on vuex using Vue.set, and that did the trick, everything is now working as expected, this is my final store method.

ADD_ITEM_TO_SELECTED_STOP(state, payload) {
      let selectedLocalStop = JSON.parse(JSON.stringify(state.selectedStop));
      let count = selectedLocalStop.categories[payload.catIndex].items[payload.itemIndex].count;
      selectedLocalStop.categories[payload.catIndex].items[payload.itemIndex].count = count + 1;
      Vue.set(state,"selectedStop", selectedLocalStop );
      //Now we search for this step on the main list
      const stepIndex = state.stops.findIndex(val => val.id === selectedLocalStop.id);
      Vue.set(state.stops,stepIndex, selectedLocalStop );
    },

I had to add the last bit after updating the whole object, because, originally, the array items were updated when the selected item was changed, I guess some sort of reference, but with the object creation, that relationship no longer works "automatic" so I need to update the array by hand

Vuex model update won't reload computed property

1 Answers