Unexpected behaviour when modify an array with Vue

Question

I want save a original array and modify the copy using a form (in a children vue component). But when the copy is modified, the origin is modified too.

I have tried:

this.updatedDatas = [...this.initialList]
this.updatedDatas = this.initialList.map((x)=> x)
this.updatedDatas = Array.from(this.initialList)

Parent script:

this.initialList = [{name: 'John'}, {name: 'Isa'}]
this.updatedDatas = [...this.initialList]

Parent template:

<form-child :item="updatedDatas[1]" />

Child template:

<textarea v-model="item.name"></textarea>

Child script:

this.$emit('updated', this.item)

I continue having the problem with a nested object. Any other solution? — sarnei
– sarnei, Commented May 23, 2019 at 19:13

Daniel · Accepted Answer · 2019-05-21 20:39:03Z

1

you need to do a deep copy of your array, otherwise you're just ending up with two arrays, that have the same object references. A deep copy will re-create the internals of the objects and arrays within.

You can use a package line lodash or build your own.

An external library will give you "infinite" depth, but this will give you 2 levels which may be enough for you.

this.updatedDatas = this.initialList.map(i => ({...i});

additional resources for deep copying

https://www.npmjs.com/package/clone

http://www.greywyvern.com/?post=363

answered May 21, 2019 at 20:39

Daniel

35.9k17 gold badges115 silver badges162 bronze badges

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

2 Comments

Shawn Pacarar Over a year ago

can also use this.updatedData = JSON.parse(JSON.stringify(this.initialList))

Daniel Over a year ago

Yes, though I don't like recommending JSON.stringify because it may lead to errors like Uncaught TypeError: Converting circular structure to JSON. The clone libraries tend to handle that better.

Collectives™ on Stack Overflow

Unexpected behaviour when modify an array with Vue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related