Vue 2.0数组和对象更新后DOM不更新问题的解决方法。

474 阅读1分钟

对象

对于已经建立的实例,vue 不能动态的添加根级别响应式属性

this.$set(this.info, 'age', 27)

有时可能需要为已有对象赋予多个新的属性

this.info = Object.assign({}, this.info, {
  age: 27,
  name: 'xiaoyu'
})

数组

由于JavaScript的限制,Vue不能检测以下变动的数组:

  1. 当使用索引直接改变或者设置一个项时,例如:this.items[index] = newvalue。
  2. 当修改数组的长度时,例如:this.items.lenght = newValue。

第一类解决办法:

// Vue.set
this.$set(this.items, indexOfItem, newValue)

// Array.prototype.splice
this.items.splice(indexOfItem, 1, newValue)

第二类解决办法:

vm.items.splice(newLength)

原文参考:blog.csdn.net/starleejay/…