前端通过v-if让页面重新刷新

获取后台返回的数据,但是前端页面未渲染最新的数据???
可以通过v-if给需要渲染的表格/表单/组件绑定一个变量,为了控制它得到最新数据后,
可以重置加载页面,以致数据渲染最新的.

实际操作方法如下:
1.看需求而定,若一进页面是需要展示的,那变量初始化应为true,若不需要展示那就为false;

export defatut{
	isShow:true,//切换显示
	initList:[]
}

2.如果是需要等接口返回即让数据更新,那就直接在调用接口之前

methods:{
	getInitData() {
		this.isShow=false
		this.$api.getInitData().then((res) => {
			if(res.code===200) {
				this.initList = res.resultData
				this.isShow=true//这里可以让页面重新加载拿到最新的数据
			}
		})
	}
}

3.如果是逻辑比较复杂,且又是在别人写的代码的基础上修改,那这时一定要仔细一点,因为一个不小心就会导致其它页面不展示了,亲测过~~~,走了一些弯路~,所以要避免

methods:{
	getInitData() {
		this.isShow=false
		this.test1()
		setTimeout(()=>{
			this.isShow=true//这时发现test1函数在其它的地方也会调用,且和我需要修改的逻辑不一样,那尽量不要在接口里面去做处理了,可以通过计时器,延迟一些时间再加载页面,这样也可以拿到最新的数据
		},2000)
	}

其实以上方法不是最好的,因为会重新加载页面时,页面会有空白出现,导致用户体验不好,但要是不介意的,用这个方法确实也能解决问题


版权声明:本文为tan_xiao_tan原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。