v-for using object

v-for에서 반복할 대상이 객체인 경우에는 키별로 반복이 된다. 배열을 쓸 때와 약간 다르므로 문법을 비교해보자.

 

 

배열 같은 경우는 push나 pop같은 것을 쓰면 데이터 변경시 반응성을 가진다. 하지만 객체 obj는 생성될 때 name 과 age 속성만 있었으므로 다른 속성을 동적으로 추가해도 반응성을 가지지 못한다. 

 

이에 대한 해결 방법은 

vm.obj 의 참조 값에 새로운 객체를 다시 할당시키는 방법이다. gender: male 속성을 추가해보자.

vm.obj = Object.assign({}, vm.obj,  { gender: male} ) 

 

위 코드를 통해 obj는 새로운 객체를 참조하게 되고 이 새로운 객체는 만들어 질 때 기존 obj 속성들과 gender 속성을 가지므로 모두 반응성을 가진다. Vue에서 데이터가 반응성을 갖기 위해서는 만들어 질 때 존재해야 함을 주의하자.