加载中...
PAGE

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

Post on 2021-10-28 131 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、待补充…

js 获取音乐的音频音谱

js 获取音乐的音频音谱

阅读更多
kubernetes 401 You have been logged out because your token has expired

kubernetes 401 You have been logged out because your token has expired

阅读更多
mysql update触发器 state改变时添加日志

mysql update触发器 state改变时添加日志

阅读更多

暂无评论

    发表评论
    返回顶部
    X