Vuex state.array.push adds objects inside of array row

Question

I develop filter functionality and after pushing array Vuex pushes all objects of array inside one array row.

pushFiltered (state, payload) {  
    state.filtered.push(payload)
},

This is result on vue dev tools:

filtered:Array[3]
0:Object
1:Object
2:Array[2]
  >0:Object
  >1:Object

How to extract and push correctly? Also spread operator, concat too not helps.

UPDATE: I found solution. If there is a single object and you want to push whole object into an array then no need to iterate the object. from stackoverflow

This is my solution:

pushFiltered (state, payload) {
        payload.forEach(function(row) {
          state.filtered.push(row)
        });
    }

It works but i don't know is good practice or not

score 1 · Accepted Answer · answered Jun 03 '20 at 14:18

Based on your code, I guess the first time filtered is not an array, I mean the initial state in the store.

So if you are passing and array of objects and want to push them, you can do it this way:

The initial state of filtered:

...
filtered: [],
...

The mutation:

mergeFiltered (state, payload) {
    state.filtered = [...state.filtered, ...payload]
}

That way you are doing a merge between the current values in the filtered array and the incoming payload.

Vuex state.array.push adds objects inside of array row

1 Answers1