Vue 리렌더링

박경준·2021년 11월 22일
0

vue에서 리렌더링 시키기

this.uncheckedProductsData.forEach((prod, index) => {
  if (prod.id === this.drawerValues.id) {
    // 리렌더링이 안되던 코드
    // prod.masterProductName = item.name;
    // prod.productMasterId = item.id;
    // 리렌더링이 되는 코드
    let list = [...this.uncheckedProductsData];
    list.splice(index, 1, {
      ...this.uncheckedProductsData[index],
      masterProductName: item.name,
      productMasterId: item.id,
    });
    this.setUncheckedProductsData(list);
  }
});
{
  "result": {
    "items": [
      {
        "id": 29,
        "name": "test11",
        "productType": "03",
        "companyName": "농협생명보험",
        "checkState": "0",
        "createdAt": "2021-11-19T07:38:43.000Z",
        "productTypeName": "질병(건강)보험 (CI 보험 포함)",
        "checkStateName": "not checked",
        "masterProductName": "(무)글로벌비즈플랜보험",
      }
    ]
  }
}

Vue는 data에 arr이 변경되었을 경우에만 감지를 할 수 있는데 arr 안 어느 딕셔너리에 있는 masterProductName의 값을 변경했기 때문에 arr의 주소 값은 변경 없이 그대로이기 때문에 변화가 감지되지 않기 때문.
data에 바인딩 되어있는 속성의 주소 값이 변경되어야만 Vue는 변화를 감지하고 re-rendering을 하게 된다.

참고 블로그

profile
빠굥

0개의 댓글