배열 데이터를 변경하는 경우

v-for 디렉티브로 출력하는 데이터는 보통 배열이 많다.

그런데 배열 데이터가 변경될 때 추적이 되지 않는 작업이 있으므로 주의해야 한다.

 

=>배열 데이터를 index 번호를 이용해 직접 변경하면 안되나??

예를 들어, 

list.contacts[0] = {no:1, name:"winter", pos:"armamenter", address:"광야"};

위의 코드처럼 배열 값을 변경할 수 없을까??

 

정답은 No, 변경할 수 없다...

 

각 배열 값 내부의 속성을 직접 변경하는 것은 Vue 인스턴스 내부의 감시자(Watcher)가 추적하기 때문에 화면이 즉시 변경된다. 

list.contacts[0].name="winter";

 

만약 기존의 배열 값을 직접 변경하고 싶다면, Vue.set 메서드를 사용하여 변경해야 한다. 

 

Vue.set(list.contacts, 0, {no:100, name:"winter", pos:"armamenter", address:"광야"})

 

v-for 디렉티브는 push, pop, shift, unshift, splice, filter, contact, slice, reduce 등과 같은 배열의 메서드가 호출되면 감시자를 통해 변경을 추적할 수 있다. 가능하다면 이와 같이 js 배열 객체가 지원하는 메서드를 이용해서 변경하자!!