为什么模板中的v-for只是在输入文本改变时才更新？

Question

我在vuejs中有此代码，但模板中的for不更新。 它改变时，在输入文本添加一些数据，但我想更新的列表中@单击

https://jsfiddle.net/nqtg9vq2/

methods: { 
    addModule:function(){ 
     var size = Object.keys(this.modules).length; 
     this.modules[size] = { 
      enumerate: '1.1', 
      name: 'test', 
      description: 'test d', 
      type: 'module', 
      criteria: {} 
     }; 
     console.log(this.modules); 
    } 
} 

Answer 1

Vue.js不能在物体检测一个新的属性。见https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

您可以使用Vue.set（）：

var size = Object.keys(this.modules).length; 
     Vue.set(this.modules,size,{ 
      enumerate: '1.1', 
      name: 'test', 
      description: 'test d', 
      type: 'module', 
      criteria: {} 
     }); 

Answer 2

它看起来像你正在运行到一个对象变化检测需要注意的vue.js文档中定义。具体而言，您似乎正在添加之前不存在的新对象属性，因此未检测到更改。

这里是一个可能的修正：

methods: { 
    addModule:function(){ 
     var size = Object.keys(this.modules).length; 
     this.modules[size] = { 
      enumerate: '1.1', 
      name: 'test', 
      description: 'test d', 
      type: 'module', 
      criteria: {} 
     }; 
     this.modules = Object.assign({}, this.modules); 
     console.log(this.modules); 
    } 
} 

所添加的线将作为一个分配给原始对象的克隆版本。由于这个克隆对象完全是一个单独的对象，所以相关的更改将被强制检测。

但是，需要注意的是，如果需要，深层克隆将需要额外的工作。