Vuejs 2개의 어레이가 변경에 반응하지 않도록 어레이를 다른 어레이에 할당하는 방법

Vuejs 2개의 어레이가 변경에 반응하지 않도록 어레이를 다른 어레이에 할당하는 방법

어레이를 다른 어레이에 할당하여 어레이 중 하나에서 변경해도 어레이가 반응하지 않도록 해야 하는 과제에 직면했습니다.

이를 위해 동일한 어레이의 로컬 복사본을 만들어 다른 어레이에 할당했습니다.다이나믹하게 대처하는 것을 좋아합니다.

이하에, 달성하려고 하는 것을 나타냅니다.

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.

한편, 이 할당을 동적으로 실시할 수 있으면, 카테고리 어레이의 카피가 있는 경우, 어레이를 카테고리 어레이와 Temp Categories 어레이에 각각 할당해, 카테고리 어레이를 사용한 계산 후에 temp Categories 어레이로 카테고리 어레이를 리셋 할 수 있도록 하고 싶습니다.그래서 나는 다음과 같이 했다.

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

이 카테고리의 변경을 실감하고 있습니다.카테고리에 반영되는 것은.temp카테고리입니다.다음 옵션도 사용하고 있습니다.

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

그러나 두 어레이는 여전히 반응적입니다.이 문제를 어떻게 해결해야 할지 도움이 필요합니다.

고마워 얘들아, 이제 두 가지 방법 모두 효과가 있어.

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

그런 건 없어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이 중 하나가 갱신되어도 완전히 동일합니다.

언급URL : https://stackoverflow.com/questions/58258270/vuejs-how-to-assign-an-array-to-another-array-in-such-a-way-that-the-two-arrays