[Vue] 데이터 변경후 랜더링이 안되는 현상.. ( feat $forceUpdate(): 강제 리랜더링 )

Vue를 이용하여 게시판을 만들고 있는데 랜더링이 되지않는다..

현 상황은 게시판은 뿌려져 있고, 3페이지로 이동을 하면 쿼리를 통해 데이터(리스트/페이징)를 성공적으로 가져 왔고

해당 데이터를 컴포넌트의 data에 넣은 상황.. 그런데 이상하게 화면은 바뀌질 않았다..

Vue는 반응형 웹이기 때문에 data안에 있는 데이터 값이 변경 되면 분명 웹화면도 변경이 되야 하는데..

 

샘플 소스

위의 소스는 search(검색조건) 데이터를 Controller로 보내주는 역할을 하며 

통신이 성공적으로 완료 되면 return되는 값을 result에 담아준다.

해당 result에 리스트, 페이징 데이터가 담겨있다.

통신을 통해 가져온 데이터

분명 데이터값을 변경이 되었다.. 저 데이터 값을 컴포넌트의 data에도 넣어줬다.. 근데 왜 안될까..

결국 이것 저것 다 찾다가 결국은 this.$forceUpdate();로 해결을 했다..

forceRerender이라는 함수를 만들어 해당 통신이 성공하면 호출하도록 하고 그 안에 this.$forceUpdate();를 넣었다.

강제로 리 랜더링을 해주는 Vue문법인데 엄청 편하다.. 근데 왠만하면 쓰지 말라고 한다. 

이 방법 말고 template에 key값을 주어 해당 key값이 변경 될 때 마다 랜더링이 되도록 하는 방법이 더욱 좋다고 하니

조금더 공부를 해야겠다