VueJSがデータを受け取っていない

Question

私はVueJSの新機能ですので、これは私の問題ですが、いくつかのガイダンスを期待しています。

私はVueインスタンスを持っていますが、データ内のpersonオブジェクトには定義済みのデータがいくつか含まれていますが、マウント時にオブジェクトに追加されます。どのような理由で私はそれがマウント時に挿入されたデータでDOMを更新していないことを理解できない。私はvueアプリをチェックして、マウントされたメソッドに追加されている人物が正しく追加されていることを確認できます。

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
     people: { 
 
     Dave: {'Age': 30, 'Plays': 5} 
 
     } 
 
    }, 
 

 
    mounted: function() { 
 
     this.people['Rob'] = {'Age': 22, 'Plays': 24}; 
 
    } 
 
    });

<script src="https://unpkg.com/vue"></script> 
 
<div id="app"> 
 
    <ul> 
 
    <li v-for="(person, key) in people"> 
 
     {{ key }}: {{ person.Age }} 
 
    </li> 
 
    </ul> 
 
</div>

私はこれがVueの落とし穴のいずれかであるか、私は本当に愚かな何かをやっている感があります。

Answer 1

これはchange detection caveat

によるものである代わりに、あなたはこのようにそれをやっている必要があります。

ここ

new Vue({ 
el: '#app', 
data: { 
    people: { 
    Dave: {'Age': 30, 'Plays': 5} 
    } 
}, 

mounted: function() { 
    this.$set(this.people, 'Rob', Object.assign({}, { 'Age': 22, 'Plays': 24})); 
} 
}); 

は、私はまた、あなたがarray change caveatsを通過推薦fiddle

あるので、あなたは向いていません将来の問題が発生する

Answer 2

または、要素がマウントされる前に起動するフックを使用します。

new Vue({ 
    el: '#app', 
    data: { 
    people: { 
     Dave: {'Age': 30, 'Plays': 5} 
    } 
    }, 

    created: function() { 
    this.people['Rob'] = {'Age': 22, 'Plays': 24}; 
    } 
});