vuejs 2の観測がうまくいきません

Question

非常に単純なシナリオでvuejsの観測がうまくいかない理由がわかりません。モデル「Asker」が更新されると、計算された小道具は自動的に値を3に更新するはずです。なぜこれが機能しないのですか？フィドルが、これは動作しませんなぜここhttps://jsfiddle.net/w1zz9cjs/3/

<div id="simulator"> 
<c-simulator-form v-bind:subject="asker"></c-simulator-form> 
</div> 

Vue.component('c-simulator-form', { 
    props: ['subject'], 
    template: '<div class="c-simulator-form">{{thesize}}</div>', 
    computed: { 
    thesize: function() { 
     return _.size(this.subject); 
    } 
    } 
}); 

var vm = new Vue({ 
    el: '#simulator', 
    data: { 
    asker: { 
     a: 1, 
     b: 2 
    } 
    } 
}); 

vm.asker['c'] = 3; 

Answer 1

あるVueのは、オブジェクトのために新しく追加された特性、すなわちの財産加えまたは削除を検出できないため、プロパティはオブジェクトのために既に存在する必要がされます反応性であること。 asker.cはVueのでは反応しないので

したがって、あなたが書く場合

vm.asker['b'] = 4; 

Vueが動作しません

vm.asker['c'] = 3; 

しばらくの変化（https://jsfiddle.net/n4qe3def/1/）を検出することができるようになります。この問題を解決するために

一つの方法は、dfsqはコメントに書いたもののようである：

vm.$set(vm.asker, 'c', 3)またはVue.set(vm.asker, 'c', 3)

しかし、あなたが実際に複数の新しいプロパティを割り当てたい場合は、より簡単な方法は、実際のための新しいオブジェクトを作成していますasker代わりに（https://jsfiddle.net/8618cx2h/2/）：

vm.asker = Object.assign({}, vm.asker, { c: 3, d: 4, e: 5 })