[Vuejs]-Removing an item from an object also removes the item from another similar object

by

3👍

✅

Due to the reactivity in vue.js, changes on one object causing changes on everything else, which was declared with a reference.

Example: If you have objectA with your data and declare objectB = objectA, all changes on objectA would affect objectB.

Solution: If you really need objectB with the same data, but without reference to objectA, you can do it like this:

objectB = JSON.parse(JSON.stringify(objectA));

Note that objectB is unable to react to changes of objectA with this solution.

EDIT: Explanation to your code

As you provided the following code:

data() {
  return { 
    a: [],
    b: [] 
  }
  }, 
methods: { 
  getData() { 
    const response = (request to retrieve the data...); 
    this.a = response.data; 
    this.b = response.data; 
  } 
}

Both, a and b are reactive. Both have the same source for their data. So changing the content of a or b means to change the source of data and with this, both have the same changed content.

According to my approach you would do it like this:

data() {
  return { 
    a: [],
    b: [] 
  }
  }, 
methods: { 
  getData() { 
    const response = (request to retrieve the data...); 
    this.a = response.data; 
    this.b = JSON.parse(JSON.stringify(this.a)); 
  } 
}
👤StevenSiebert

Leave a comment