【VUE】Vue改变data的值,视图不会刷新的解决办法!

本文介绍在使用Vant UI库配合Vue实现分页功能时遇到的数据加载不刷新问题及解决方法。通过手动设置Vue实例中的资源数据,触发视图更新。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

背景:
       在用vant配合vue做分页功能的时候,发现请求下一页数据,数据已经请求成功,但是数据未能加载到视图上边,也就是视图没有得到刷新。

       纠结许久未能找到合适的解决办法,查找文档得知,

       当data中的数据resources进行改变时,需要对data中的resources数据进行手动设置(刷新)。

var app = new Vue({
	el:"#app", 
	data: {
		//标签栏序号
		active: 0, 
		isLoading: false,
		//资源对象
		resources: result,
		//分页参数
		currentPage:currentPage,
		totalitems:totalitems,
		itemsperpage:itemsperpage,
		pagecount:pagecount,
	},
	methods: {
		onRefresh() {
			setTimeout(() => {
				this.isLoading = false;
			}, 1000);
		},
	}
});	

解决办法:(app为上面声明的Vue对象,'resources’为data中资源属性名,mk为查询下一页数据)

app.$set(app,'resources', mk);

       

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值