Vue.js Why 2 objects are linked?

Question

I have two data objects called items and itemsOrg

var vm = new Vue({
      el: '#divVM',
      mixins: [mix],     
      data: {
            items: [],
            itemsOrg:[],
            // ....
           },

When the page loads, I make an AJAX call to fetch data from MySQL table and assign it to items and itemsOrg object.

function getMustacheVariables()
{
    $.ajax({
       type: "POST",
       url: "adminAjax.php", 
        data: { 
            actionID: 'GET_DATA', 
        },
        dataType: "json",

        success: function(data) 
        {
            vm.items= data; 
            vm.itemsOrg = data;
        }
        // ...

However, when I update Vm.items, vm.itemsOrg is also automatically updated and don't know why these the two are linked. Here is a snapshot of console.log

vm.items[0]["key"] 
"agent"
vm.itemsOrg[0]["key"]
"agent"
vm.items[0]["key"] = "new_key"
"new_key"
vm.itemsOrg[0]["key"]
"new_key"
vm.itemsOrg[0]["key"] = "updated_key"
"updated_key"
vm.items[0]["key"] 
"updated_key"

Is there a reason that these two objects are linked? I even tried assigning vm.items to vm.itemsOrg using vm.items.slice() as well as push() but the two objects are always linked.

I appreciate any help.

There was a typo error in my original post. Please see updated code. — user761100
– user761100, Commented Aug 9, 2018 at 15:34
vm.items= data; vm.itemsOrg = data; means both variables are now references to the same object. You'll want to clone data instead of simply assigning the other variables as equal to it. — Daniel Beck
– Daniel Beck, Commented Aug 9, 2018 at 15:34
Try using [...data] for arrays, or {...data} for objects. — m3characters
– m3characters, Commented Aug 9, 2018 at 15:37

PaulCo · Accepted Answer · 2018-08-10 09:25:31Z

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

edited Aug 10, 2018 at 9:25

answered Aug 10, 2018 at 9:17

PaulCo

1,5275 gold badges18 silver badges35 bronze badges

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

Comments

Abderrahim Soubai-Elidrisi · Accepted Answer · 2018-08-09 15:37:11Z

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;

answered Aug 9, 2018 at 15:37

Abderrahim Soubai-Elidrisi

5,2621 gold badge31 silver badges41 bronze badges

4 Comments

user761100 Over a year ago

Ok. I understand that the same data is assigned (referenced) to vm.items and vm.itemsOrg. What is the best way to make a static copy of the 'data' object in vm.itemsOrg which does not change when vm.items changes, {...data} did not help.

Abderrahim Soubai-Elidrisi Over a year ago

Try this : vm.itemsOrg = Object.assign({}, vm.items);

user761100 Over a year ago

@ Abderrahim Soubai Elidrissi: vm.itemsOrg = Object.assign({}, vm.items); does not work. However, vm.itemsOrg = jQuery.extend(true, {}, vm.items); works

Abderrahim Soubai-Elidrisi Over a year ago

Enjoy it's same main idea just like Object.assign ;)

Collectives™ on Stack Overflow

Vue.js Why 2 objects are linked?

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related