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

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
			}
		}
	},