Question

我无法弄清楚为什么vuejs观察在一个非常简单的场景中不起作用。更新模型“提问者”时，计算出的道具应自动将值更新为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无法检测任何新添加的对象属性的属性添加或删除，即属性必须已经那里的对象是被动的。

因此，如果你写

vm.asker['b'] = 4;

Vue将能够在

时检测到变化（https://jsfiddle.net/n4qe3def/1/）

vm.asker['c'] = 3;

不起作用，因为asker.c在Vue中没有被动反应。

解决此问题的一种方法就像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 })

vuejs 2观察不起作用

1 个答案: