vue请求数据时渲染页面报错( created时promise请求处理)
首先说下今天遇到的问题:1、在页面中绑定的对象,使用substr时报错,或者绑定的对象中的属性显示未定义2、页面中绑定的对象中的属性的属性未定义报错信息如下:这些错误轻则不会影响页面,重则页面都打不开。问题原因:这些问题的出现是因为最开始请求后台的数据接口方法 fun A 写在 mounted 中,fun A 如下:getDetailData() {var that = this;var id =
首先说下今天遇到的问题:
1、在页面中绑定的对象,使用substr时报错,或者绑定的对象中的属性显示未定义
2、页面中绑定的对象中的属性的属性未定义
报错信息如下:
这些错误轻则不会影响页面,重则页面都打不开。
问题原因:
这些问题的出现是因为最开始请求后台的数据接口方法 fun A 写在 mounted 中,
fun A 如下:
getDetailData() {
var that = this;
var id = this.$route.query.id;
this.$http({
method: 'get',
url: "qls-mgt-integrate/document/manager/viewDoc",
params: {id: id}
}).then((res) => {
if (res.data.code == "20000") {
console.log('方法调用');
}
})
},
尝试解决:
将fun A 放置在 created 中,还是会出现一样的错误。
在观察下fun A 方法,发现方法中 是采用 promise 对返回的接口数据 接收调用。
我们都知道,生命周期 created 作用是在dom元素渲染前生效,一般是调用请求数据接口 ,初始化数据,然后在执行mounted中的方法,渲染页面等操作。按理说方法放置位置应该是对的。
那就应该是created 中的方法异步执行导致的。
那就测试下流程吧,方法如下:
在funA中打印信息,在mounted 和created 方法中打印信息,查看流程怎么走的。
结果打印信息如下:
结果发现:
由于created 中的方法是异步执行的,这才导致fun A 在最后才请求到数据,而这个时候页面已经渲染完,所以会报 找不到绑定的对应值的错误。
解决方案:
1、在页面中添加标记 flag :false,
请求接口拿到数据后改变 flag 的值
页面中渲染元素前 v-if 判定下这个flag 的值即可。
代码如下:
方法改变:
getDetailData() {
var that = this;
var id = this.$route.query.id;
this.$http({
method: 'get',
url: "qls-mgt-integrate/document/manager/viewDoc",
params: {id: id}
}).then((res) => {
if (res.data.code == "20000") {
that.flag = true;
console.log('方法调用');
}
})
},
页面判定:
<span v-if="flag">{{detailform.draftDatetime.substr(0,10)}}</span>
2、在页面绑定的对象上判定:
判断这个对象是否存在或者是否是指定类型的,如下:
<span>{{ detailform.draftDatetime.length!=0 ?detailform.draftDatetime.substr(0,10) :''}}</span>
<span>{{ detailform.checkDoc ? detailform.checkDoc.remark : '' }}</span>
更多推荐
所有评论(0)