element-ui中对获取的data新绑定数据进行数据更新却不触发数据更新

当我们需要对后台获取的res.data进行新绑定数据的时候
如:

data () {
	return { 
		list: [ ]
	}
}
.....................res => {
  this.list = res.data;
	 this.list.forEach(item => {
		item.a = 1234;
	})
}

这个时候,如果对上面新添加的变量a进行值更新操作并不能触发视图更新,如:
element-ui中对获取的data新绑定数据进行数据更新却不触发数据更新_第1张图片
如上面的批量打折并不能影响下面打折,即使对list => item.a = 789 ,但是视图里a的值
还是1234

解决办法就是先声明一个list,将变量绑定后再给this.list赋值

.....................res => {
  var list = [ ];
  list = res.data;
	 list.forEach(item => {
		item.a = 1234;
	})
	this.list = list
}

还可以用vue里面的Vue.set( target, key, value )来添加对象属性或者来改变数组,只能改变根属性data下面的子元素

data() {
	return{
		arr: [1,2,3],
		obj: {
			a:1,
			b:2,
		}
	}
}

vue.set(vm.arr,1, 'hwl')       ====>   arr:[1,'hwl',3]

vue.set(vm.obj, 'c', 3)        ===⇒  obj: {
																a:1,
																b:2,
																c:3
										}

你可能感兴趣的:(element-ui,vue)