[Vue] Component 강제 업데이트

상황

자주 실수하는 것중 하나.

기존 List가 있고, Api를 통해 리스트의 값을 받아서 기존 List에 저장했는데, 화면에는 전혀 변화가 없는 경우

 

---

해결방법

새로운 List객체에 Api로 받은 리스트를 받고, 기존 List에 새로운 List객체를 대입한다.

 

Vue의 reactivity 시스템은 모든 변화를 감지하지 못합니다..(언제그러는지는 정확하게 모르겠으나 개발하다보면 왕왕 있습니다..)

 

그래서 변화를 감지하지 못할때 강제 리렌더링을 해줍니다.

---

코드

아래와 같은 코드는 headerList가 기존 리스트이다.

새로운 열을 추가하고 싶을때는 아래와 같이 해준다.

...this.headerList는 기존 리스트를 뜻한다.

addHeaderRow() {
  this.headerList = [
    ...this.headerList,
    {
      header_name: '',
      header_value: ''
    }
  ]
},

---

참고

https://hyeonyeee.tistory.com/97

[Vue] Component Force Rerendering 하기 (강제로 rerender)