[Vuejs]-Vue.js Why 2 objects are linked?

by

3👍

✅

After playing with your example I noticed that we can simplify your AJAX fetched object as data = { 0: { key: 'agent'} and it has this property data[0] assigned to a reference of the object { key: 'agent'} (data can be called a nested object)

So it seems that even if you’re copying the data object with Object.assign you’ll still have every referenced object in it. As said here :

But be aware that this makes a shallow copy only. Nested objects are still copied as references.

So you have two options that would work without JQuery:

1. Using JSON.parse and JSON.stringify like JSON.parse(JSON.stringify(data)) to stringify then parse your object

2. Making a loop to manually deep copy the object (as in the outdated answer of the thread referenced above)

And if using JQuery you can write jQuery.extend(true ,{}, data) with the deep option set to true

👤PaulCo

1👍

Yes there is a reason here. this code means that’s vm.items and vm.itemsOrg are the same ref (data).

use chrome devtools to see the Trace

    vm.items= data; 
    vm.itemsOrg = data;
👤Abderrahim Soubai-Elidrisi

Leave a comment