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 () { this.members[0].logs = []; 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
| mounted: function() { this.$set(this.members[0], 'logs', []); this.members[0].logs = [...]; }
mounted: function() { this.members[0].logs = []; this.members[0].logs = [...]; this.$forceUpdate(); }
|