javascript - vuejs 2 observation doesn't work -
i can't figure out why vuejs observation don't work on simple scenario. when model "asker" updated, computed props should automagically update value 3. why not working ? fiddle here 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;
why doesn't work because vue cannot detect property addition or deletion of newly added properties objects, i.e., properties have there object reactive.
therefore, if write
vm.asker['b'] = 4;
vue able detect change (https://jsfiddle.net/n4qe3def/1/) while
vm.asker['c'] = 3;
doesn't work because asker.c
not reactive in vue.
one way fix dfsq wrote in comment:
vm.$set(vm.asker, 'c', 3)
or vue.set(vm.asker, 'c', 3)
but if want assign multiple new properties, easier way creating new object asker
instead (https://jsfiddle.net/8618cx2h/2/):
vm.asker = object.assign({}, vm.asker, { c: 3, d: 4, e: 5 })
Comments
Post a Comment