Блог

У меня есть два объекта, содержащих одни и те же данные, я хочу удалить элемент из одного из объектов (и сохранить другой с исходными данными для других целей), однако, когда я использую метод сращивания для одного из объектов, затрагиваются оба, поэтому я теряю свой элемент в обоих объектах.

 <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 amp; arrayB before splice: ", this.arrayA, this.arrayB);
            // arrayA amp; arrayB before splice : [{...}, {...}], [{...}, {...}]

            this.arrayA.splice(indexOfItem, 1);

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

Из-за реактивности vue.js изменения на одном объекте вызывают изменения на всем остальном , что было объявлено со ссылкой.

Пример: Если у вас есть objectA с вашими данными и объявлением objectB = objectA , все изменения objectA повлияют objectB .

Решение: Если вам действительно нужны objectB те же данные, но без ссылки objectA , вы можете сделать это так:

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

Обратите внимание, что objectB это решение не может реагировать на изменения objectA .

ИЗМЕНИТЬ: Пояснение к вашему коду

Как вы указали, следующий код:

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

И то, и другое, a и b являются реактивными. У обоих один и тот же источник данных. Таким образом, изменение содержимого a или b означает изменение источника данных, и при этом оба имеют одинаковое измененное содержимое.

Согласно моему подходу, вы бы сделали это так:

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