[Vue] html삭제하기

Vue의 특성 중 하나는 배열의 변경을 감지하여 DOM을 업데이트 한다.

금일 삭제기능을 구현 중에 애먹은 내용을 적어본다.

먼저, 현재 유지보수하고 있는 뷰의 코드 대부분 객체 지향으로 구성이 되어있다.

NewAddress.vue 페이지에서 - 버튼을 누르면 해당 돔의 내용이 삭제 되게 끔 구현하려한다.

통상은 data()부분에 배열이 구성되어있어야 하나, 그렇지 않았다. 

구조는 페이지에서 -버튼 누르면, 해당 객체의 주소값이 파라미터값으로 버튼클릭 이벤트 핸들러안에 들어가게 구현을 한 후

실제 삭제, 추가하는 파일(Contact.js)에 주소값을 넘겨주어 삭제하는 구조로 되어있다.

삭제까지는 잘 구현했는데, 돔이 리랜더링 되지않은 문제점이 발생한다. 내용이 삭제되면 보이는 UI도 리랜더링을 통하여 삭제가 되어야 하는데.. 그러지 않았다.

구글링을 하다보니, 뷰는 배열의 변경을 감지하여 돔을 업데이트하기 때문에 배열 변경을 감지할 수 있는 메서드를 사용해야한다.

push(), pop(), shift(), unshift(), splice(), sort(), reverse()

 따라서, 기존 Contact.js 파일에서 삭제하는 함수를 보니 delete로 구성이 되어있다.

그래서, splice로 변경하여, 해결함.

 // delete this.accounts[found.index[i]]
this.accounts.splice(found.index[i],1)