加载中...
PAGE

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

Post on 2021-10-28 13 0

使用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、待补充…

mycat 简单实现 读写分离

mycat 简单实现 读写分离

阅读更多
mysql 树目录查询语句优化,提高查询效率

mysql 树目录查询语句优化,提高查询效率

阅读更多
mysql FROM多表时同时做为left join参数时报错

mysql FROM多表时同时做为left join参数时报错

阅读更多

暂无评论

    发表评论
    返回顶部
    X