Vue 선언된 data에 chiledren 추가시 렌더링이 안될 때

data가 이미 정의 되어있고 나중에 데이터를 추가하면 observer가 생성되지 않아 데이터가 갱신이 되어도 DOM이 업데이트가 안 된다.

예시

템플릿

1
2
3
4
5
6
7
8
<div id="memberList">
<div v-for="member in members">
{{ member.name }}
<ul v-if="member.logs && member.logs.length > 0">
<li v-for="log in member.logs"></li>
</ul>
</div>
</div>

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
new Vue({
el: '#memberList',
data: {
members: [{ id: 1, name: 'gracefullight' }],
},

mounted: function () {
/* member의 logs 데이터는 그냥 배열로 선언된다. */
this.members[0].logs = [];
/* 데이터를 넣어도 위 템플릿의 <li> 부분이 반복되지 않는다. */
this.members[0].logs = [
{ id: 1, message: 'test action', created_at: '2017-11-22' },
];
},
});

해결

set 메소드 또는 $forceUpdate 메소드를 사용하면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
/* 1안 */
mounted: function() {
this.$set(this.members[0], 'logs', []);
this.members[0].logs = [...];
}

/* 2안 */
mounted: function() {
this.members[0].logs = [];
this.members[0].logs = [...];
this.$forceUpdate();
}