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을 하게 된다.