vue 修改数组数据 界面不渲染视图的解决方法汇总

使用vue进行开发时,我们经常会遇到对已经渲染在界面上的数组进行修改参数时,参数修改之后并不会更新界面的信息,但是实际上数组的参数是已经修改到了,只是vue没有进行视图的更新渲染,下面列举了多种的解决方法…

对此,vue官服也有在教程中有所提到:
vue官方
下面就来汇总一下可以更新视图方法
假设我们当前的数组为:

	demoList:[{
		name: "gq",
		value: "demo"
	}]

1、使用 Vue.set --该方法是官服提出的解决方法之一
vue官方

	this.demoList[0].name = "demo";
	this.$set(this.demoList[0], name, 改demo的值); //可以这样的写法

2、使用数组的splice方法 --该方法是官服提出的解决方法之一
vue官方

	let obj = {
		name: "demo1",
		value: "demo1"
	};
	this.demoList.push(obj); //push之后是会自动进行界面的渲染
	this.demoList[1].name = "ccc"; //而后进行参数修改之后,博主遇到过无法进行渲染的情况,这个时候使用第一种也无效
	this.demoList.splice(this.demoList.lenght); //更新渲染

3、使用forceUpdate强制刷新
当数据层次很多时也会遇到不刷新视图的情况

	this.demoList[0].name = "demo";
	this.$forceUpdate(); //在修改参数后加上这句进行强制刷新视图

4、使用深拷贝进行视图刷新

	this.demoList[0].name = "demo";
	this.demoList = JSON.parse(JSON.stringify(this.demoList)); //使用JSON进行深拷贝,如果数组中有空参的对象,会消失,并且不会继承原型链上的方法
	// 或者直接去写一个实现深拷贝的方法

5、待补充…

  • 6
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值