vue2修改数据(对象、数组)后,页面不更新的解决
解决
property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。
var vm = new Vue({
data:{
formData:{
acNo: "89111"
},
list: []
}
})
// `vm.formData.acNo` 是响应式的(当acNo变化的时候,视图有用到acNo的地方会自动更新)
vm.formData.acName = "小小"
// `vm.formData.acName` 是非响应式的(当a变化的时候,视图有用到b的地方不会自动更新)
对于已经创建的实例对象,Vue 不允许动态添加根级别的响应式 property。
this.formData.newitem = 'xxx';
newitem就不会被检测到
但是,可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。
Vue.set(vm.formData,'acName ',"小小")
//或者
this.$set(this.formData,'acName',"小小")
Vue.set(this.formData, 'newitem', 'xxx);
// 即可将新增属性变为响应式的
数组
Vue 不能检测以下数组的变动:当你利用索引直接设置一个数组项时。
例如:vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如:vm.items.length = newLength
// Vue.set
this.$set(this.list, 2, "新值")
// Array.prototype.splice
this.list.splice(2, 1, "新值")