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

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

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

这个时候,如果对上面新添加的变量a进行值更新操作并不能触发视图更新,如:
在这里插入图片描述
如上面的批量打折并不能影响下面打折,即使对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
										}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值