Taking out one item from a container results in the removal of that same item from another identical container as well

Question

Taking out one item from a container results in the removal of that same item from another identical container as well

I am facing an issue where I have two objects that contain the same data. I need to remove an item from one of the objects without affecting the other. However, when I try to use the splice method on one object, it also affects the other one and I end up losing the item in both objects.

<button @click="deleteData(0)" />

export default {
    data() {
        return {
            arrayA: [],
            arrayB: []
        }
    },
    methods: {
        async initData() {
            const { data: response } = await this.$store.dispatch("getData", { id: this.$route.params.id })

            this.arrayA = response
            this.arrayB = response
        },

        deleteData(indexOfItem) {
            console.log("arrayA & arrayB before splice: ", this.arrayA, this.arrayB);
            // arrayA & arrayB before splice : [{...}, {...}], [{...}, {...}]

            this.arrayA.splice(indexOfItem, 1);

            console.log("arrayA & arrayB after splice :", this.arrayA, this.arrayB);
            // arrayA & arrayB after splice :  [{...}], [{...}]
        }
    }
}

javascript vue.js

Answer 1

Answer №1

In vue.js, the reactivity feature causes changes in one object to affect everything else that was declared with a reference.

For example: Suppose you have an objectA with your data and declare objectB = objectA. Any changes made to objectA will also impact objectB.

To avoid this: If you need objectB to hold the same data as objectA, but independently, you can use the following method:

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

Keep in mind that using this approach means that objectB will not react to changes made to objectA.

UPDATE: Explanation of your code snippet

Since you provided the code below:

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 and share the same data source. Therefore, altering the content of either a or b will result in changing the source of data, affecting both variables simultaneously.

An alternative approach would be:

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)); 
  } 
}

Answer 2

In vue.js, the reactivity feature causes changes in one object to affect everything else that was declared with a reference.

For example: Suppose you have an objectA with your data and declare objectB = objectA. Any changes made to objectA will also impact objectB.

To avoid this: If you need objectB to hold the same data as objectA, but independently, you can use the following method:

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

Keep in mind that using this approach means that objectB will not react to changes made to objectA.

UPDATE: Explanation of your code snippet

Since you provided the code below:

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 and share the same data source. Therefore, altering the content of either a or b will result in changing the source of data, affecting both variables simultaneously.

An alternative approach would be:

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)); 
  } 
}

Taking out one item from a container results in the removal of that same item from another identical container as well

Answer №1

Similar questions

The AJAX in Code Igniter is throwing an error due to an undefined index 'id

Updating the store state in Vuex using an asynchronous request with Axios in a Vue component

Implementing checkboxes for each API data in JavaScript

How can you use jQuery to display an image when hovering over text?

What steps are needed to obtain the Access Token and avoid the CORS Policy in a Spring Boot application?

Verify the validity of the user's input

In JavaScript, learn how to trigger a statement only when two specific events occur simultaneously

Received undefined response from Axios.get() request

Using jQuery to manage multiple page requests on a single page

Exploring a collection of objects housed in a json document

Display a fixed three levels of highchart Sunburst upon each click in Angular8

Tips for unchecking a checkbox when another checkbox is checked in Angular

Unable to choose an item from b-dropdown in vuejs

Save the content of textarea within a .txt document while preserving the line breaks

How do I access values in my factory after the deviceready event in AngularJS/Cordova?

What steps do I need to follow in order to properly execute this HTTP request?

The outcome of the Javascript Calculator is showing as "Undefined"

Vue enables components to be used in any part of the application, not limiting them to

The ultimate guide to removing a targeted form input using jquery

Opting for Mysql over MongoDB as the provider in Next.js with Next-auth