关于Vue中页面成功渲染数据undefined的问题

蔡不蔡

已于 2022-04-20 22:49:05 修改

阅读量4.2k

点赞数 1

分类专栏：前端 JavaScript vue 文章标签： javascript 前端 vue

于 2022-03-04 22:59:22 首次发布

蔡定交

本文链接：https://blog.csdn.net/skxx123/article/details/123286996

版权

JavaScript 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

本文探讨了在前端应用中遇到的初始化数据显示undefined的问题及其解决方案。两种方法被提出：一是使用axios请求拦截器展示加载中状态，二是通过Vue的watch监听数据变化，确保数据加载完成后才显示DOM。这两种方法都能有效避免用户看到undefined，提升用户体验。

摘要由CSDN通过智能技术生成

undefined问题

其实就是数据还没拿到就渲染了一次造成的，解决的办法也有很多，个人觉得不影响使用，但老有人问为啥会一开始显示undefined，也懒得解释了，改吧。。

方法一

安装并使用axios

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么 加载中的图片放在这里即可
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

方法二

用watch监听数据，让数据加载完成后再显示dom，数据获取期间显示加载中……

<template>
	<view style="background-color: #ffe1cd;height: 100vh;background: url(/static/my_bg.png);">
		<view v-if="showdom">
			<view class="topbtn">
				<view class="showcur">
					{{curnum}} / {{arrlength}}
				</view>
				<button class="share" type="default" open-type="share">分享</button>
			</view>
			<view class="miyu-style">
				<view class="title">
					{{datas.title}}
					<view class="midi" v-show="showres">
						答案：{{datas.content}}
					</view>
				</view>
				<view class="footbtn">
					<view class="content" @click="showmidi">
						查看答案
					</view>
					<view class="next" @click="predata(datas._id)">
						下一个
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			数据加载中……
		</view>
	</view>
</template>

//js部分
watch:{
	datas:function(val,oldval){
			if(val!==oldval){
				this.showres = false
				this.showdom = true
			}
		}
	},