vue 数据更新视图不刷新

Finaina

已于 2024-03-12 09:40:19 修改

阅读量190

点赞数 1

分类专栏： vue uniapp JS 文章标签： vue.js 前端 javascript uni-app

于 2023-03-06 16:43:33 首次发布

本文链接：https://blog.csdn.net/CSDNLFF/article/details/129365284

版权

JS 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

vue

9 篇文章 0 订阅

订阅专栏

uniapp

6 篇文章 0 订阅

订阅专栏

针对vue2 uni-app经常莫名其妙地出现时而无法刷新、时而刷新不完全等问题的简要记录。

排除视图数据不小心没更新值的情况下，比如赋值对象错误（大小写、弄混啥的也不是干过），其它常见的频发场景：

表单提交后的数据整体没能及时刷新
子组件选择指定人员后，回到父组件时没能及时在页面刷新
多层数据嵌套

$set

this.$set(原对象,索引,替换的值)

this.$set(that.formData.ApprovalUser[that.listName], that.UserIndex, singleObj)

多层数据嵌套

vue2使用的是Object.defineProperty()，针对的是对象的某个属性，在vue的初始化阶段完成了对已有成员的监听，所以新增的属性无法监听。通过set方法就相当于初始化阶段的数据响应式处理。

set方法单独使用也不太行。感谢参考博文的有效解答，非常有用，在此留个小小的笔记。

const addItem = {
	name: '附件' + (val.FileList.length + 1),
	extname: '.' + data.FileName.split(".")[1],
	url: http.config.imgBaseUrl + data.FileUrl,
};

val.FileList.push(addItem);

this.$nextTick(() => {
	//添加变动的属性 给第一层的对象，至关重要
	this.$set(
		this.itemList,
		Math.random(), Math.random()
	);
	this.itemList[idx1].NodeItem[idx2].FileList =
		Object.assign([],
			this.itemList[idx1].NodeItem[idx2]
			.FileList, addItem)
});