How do I push an object into an array nested in an object and retain reactivity in Vue

Question

I have the following object:

{ property1:'value1', property2:'value2', property3:[{ property4:'value4' },{ property5: 'value5'}], property6:'value6' }

And now I want to push the following into the value of property3

{ property7:‘value7’}

The final result would be like

{ property1:'value1', property2:'value2', property3:[{ property4:'value4' },{ property5: 'value5'},{property7:'value7'}], property6:'value6'}

Any idea how to do this?

I tried Object.assignbut that does not work in this case because of the array.

Why not just obj.property3.push({ property7: 'value7'})?

skirtle
– skirtle

2019-12-05 21:18:39 +00:00
Commented Dec 5, 2019 at 21:18 — skirtle
– skirtle, Commented Dec 5, 2019 at 21:18

Shirish Maharjan · Accepted Answer · 2019-12-05 21:35:04Z

1

try this

obj.property3.push({ property7: 'value7'})
obj={...obj}

answered Dec 5, 2019 at 21:35

Shirish Maharjan

5025 silver badges17 bronze badges

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

4 Comments

Rob Over a year ago

Why should he do that? What does that do? How does it answer the question? How To Answer

Shirish Maharjan Over a year ago

Adding property to an object is straight forward. But when you make this multi level object reactivity may get loss. What I suggested is assigning new object to the variable with old value which forces it to rerender

MK01111000 Over a year ago

@Shirish looking at the console log your suggestion adds the newly added data correctly into the object. But reactivity seems to be lost. there is no re-rendering.

MK01111000 Over a year ago

There was an error in my code. I got it working now. Thanks!

Collectives™ on Stack Overflow

How do I push an object into an array nested in an object and retain reactivity in Vue

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related