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

Andres Foronda · Accepted Answer · 2020-06-03 14:18:35Z

1

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.

answered Jun 3, 2020 at 14:18

Andres Foronda

1,4191 gold badge10 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related