Vuejs Как назначить массив другому массиву таким образом, чтобы два массива не реагировали на изменения

Question

Я столкнулся с этой проблемой, чтобы назначить массив другому массиву, чтобы массивы не реагировали на изменения одного из массивов.

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

Ниже приведено то, что я пытаюсь достичь

const ComponentA = {
  data: function() {
    return {
      categories:[
        {
          name: 'Category 1',
          series: [
            {
              name: 'Series 1',
              value: 5
            },
            {
              name: 'Series 2',
              value: 5
            }
          ]
        },
        {
          name: 'Category 2',
          series: [
            {
              name: 'Series 1',
              value: 50
            },
            {
              name: 'Series 2',
              value: 56
            }
          ]
        }
      ],
      tempCategories:[
        {
          name: 'Category 1',
          series: [
            {
              name: 'Series 1',
              value: 5
            },
            {
              name: 'Series 2',
              value: 5
            }
          ]
        },
        {
          name: 'Category 2',
          series: [
            {
              name: 'Series 1',
              value: 50
            },
            {
              name: 'Series 2',
              value: 56
            }
          ]
        }
      ]
    }
  },
  methods: {
    resetCategory() {
      this.tempCategories.forEach((category,i)=>{
        category.series.forEach((series,j)=>{
          this.categories[i].series[j] = series;
        });
      });
    }
  }
}

после вычислений по категориям, которые я могу сброситьмассив категорий с помощью tempCategories путем вызова

this.resetCategory() and it works as expected.

Между тем, я хочу иметь возможность выполнять это назначение динамически, поэтому, когда у меня есть копия массива категорий, я могу назначить массив как для категорий, так и для массивов tempCategories соответственно ипосле вычислений с массивом категорий я могу сбросить массив категорий с массивом tempCategories. Поэтому я сделал следующее.

initialize(category) {
  this.tempCategories = category;
  this.categories = category;
}

Я понимаю, что изменения в this.categories отражаются в this.tempCategories;Я даже использовал следующие параметры

initialize(category) {
  this.tempCategories = category.slice(); 
  //or this.tempCategories = Json.parse(Json.stringify(category));

  this.categories = category.slice();
  //or this.categories = Json.parse(Json.stringify(category));
}

, но эти два массива все еще активны. Пожалуйста, мне нужна помощь, как решить эту проблему.

Answer 1

Спасибо, ребята, теперь работает оба метода

initialize(categories){
  //let copy = _.cloneDeep(categories);
  let copy = JSON.parse(JSON.stringify(categories));
  this.tempCategories = copy;
  this.categories = copy;
},

resetCategories(){
  //this.categories = _.cloneDeep(this.tempCategories);
  this.categories = JSON.parse(JSON.stringify(this.tempCategories)); 
},

Answer 2

Нет такого Json. но это может быть JSON.

initialize(category) {
  this.tempCategories = JSON.parse(JSON.stringify(category));
  this.categories = JSON.parse(JSON.stringify(category));
}

И вы не можете предотвратить поддельные копии с помощью

  this.tempCategories = category;
  this.categories = category;

Может быть, эти три Array точно такие же, даже один изони обновляются.