Vuejs - add property to each item in an array with reactivity

Question

I have banged my head against all kinds of walls for days and would love some help with this please.

I am getting the following error but can't really see how what I'm doing has anything to do with vuex here: [vuex] do not mutate vuex store state outside mutation handlers.

In my vue component I define an empty array for future data I get from an external API.

data() {
   return {
      costCentres: [],
   };
},

I have a watch on my vuex store object named schedule (which I've brought in using MapState... and also tried with a getter using MapGetter to see if that made any difference). In this watch I create my array costCentres, with each element consisting of about five properties from the API. I add two properties at this point (sections and tasks) which I intend to later populate, and which I need to be reactive so I do so in accordance with the Vue reactivity documentation which all the other questions I've found remotely like mine seem to reference.

watch: {
        schedule() {
            if (this.schedule.rows) {

                this.costCentres = this.schedule.rows.filter((row) => {
                    return row.cells[
                        this.schedule.columnKeysByName["Cost Code"]
                    ].value; // returns row if Cost Code value exists
                });

                this.costCentres.forEach((costCentre) => {
                    this.$set(costCentre, 'section', null);
                    this.$set(costCentre, 'task', null);
                });

            }
        },

The this.$set lines throw the earlier mentioned error for every element in the array.

When I later update the properties, the change is reactive so its just the flood of error messages that's got me beat. Obviously if I don't use set then I don't get reactivity.

I have no idea how what I am doing is related to the vuex store as costCentre is a plain old data property.

I've tried hundreds of variations to get this all work (including this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 }) which doesn't seem to work) and I've run out of options so any assistance would be greatly appreciated!

(Please also let me know if I need to show more code - I was trying to keep this concise!)

Michal Levý · Accepted Answer · 2021-02-20 15:34:41Z

2

this.schedule.rows is an array containing some objects (mapped from Vuex so the array and objects inside "belongs" to Vuex)
You are creating this.costCentres by filter - so in the end this.costCentres is just another array containing subset of objects from this.schedule.rows (elements inside are just pointers to objects inside Vuex)
In the forEach loop, you are modifying objects which are part of the Vuex store and as a result getting error [vuex] do not mutate vuex store state outside mutation handlers.

If you want to modify those objects, only way is to use Vuex mutations

Alternative solution is to make a copy of objects (create new objects with same values):

this.costCentres = this.schedule.rows.filter((row) => {
    return row.cells[this.schedule.columnKeysByName["Cost Code"]].value;
  })
  .map((row) => ({...row, section: null, task: null }))

Note: code above creates just a shallow copy so if your objects does contain some deeply nested properties, you have to use some other way to clone them

Now objects inside this.costCentres are not part of the Vuex and can be modified freely without using mutations...

edited Feb 20, 2021 at 15:34

answered Feb 20, 2021 at 12:32

Michal Levý

38.6k8 gold badges82 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

rossco555 Over a year ago

Thanks for the quick reply! Your suggestion works perfectly, I can't express enough thanks! So that I'm clear for the future but, regarding your point (3), what is the object(s) in the Vuex store being modified in the forEach? I had thought this.costCodes was outside the store as a local data object and all I'm doing is updating it with two new properties?

rossco555 Over a year ago

(By not using map am I somehow linking costCodes to the store item schedule?)

Michal Levý Over a year ago

If you put object into an array, the element in the array contains just a reference to the object (it's address in memory). If you then take this element and put it into another array (as you do with filter), it is still pointing to the same object in memory. codeburst.io/…

Collectives™ on Stack Overflow

Vuejs - add property to each item in an array with reactivity

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related