有个页面在加载后要从后台获取数据,然后显示
不过好像是数据层次有点多?像下面这样,获取的数据放在details里面,然后页面上对应的数据没有显示
res:[
{
name:'tom',
age:10,
details:[
{
name:'jerry'
}
]
}
]
但是在 Vue Devtools 里面数据是有的
然后在mounted执行完查询函数以后,使用$forceUpdate()强制刷新,页面上数据也没有显示,然后用 alert 显示发现数据是空的
mounted: function () {
this.getdata();
this.$forceUpdate(); //强制刷新视图
alert(JSON.stringify(this.res[0]))
}
然后眉头一皱,发现事情并不简单,好像是因为Ajax是异步执行的,数据还在获取中
然后想了一下,既然数据还在获取,那我就等下在强制刷新,
然后将上面的mounted函数改了一下,设置一个 20ms 后执行强制刷新的定时器,然后数据就能够显示了
mounted: function () {
this.getdata();
// this.$forceUpdate(); //强制刷新视图
alert(JSON.stringify(this.res[0]))
// 此时 直接查询 是空的 $forceUpdate() 刷新也没有显示
// 这里设置 在加载完成后 20ms 后再强制刷新视图
_this=this;
setTimeout(function(){
_this.$forceUpdate();
},20)
}
这个定时器的本意是,在 data 中有数据后再强制刷新
但是如果数据多了的话,获取数据时间再长一点,那不知道能不能显示出来了,定时器的时间也不能过长
然后就在想怎么判断数据已经获取完成了呢,然后突然想到 Ajax 本来就有获取成功和获取的回调函数
又重新改了一下,发现强制刷新成功了,页面能够显示数据,真是蠢到家了QAQ
mounted: function () {
this.getdata();
}
----------------------------
getdata(){
var _this = this;
Ajax({
type: 'POST',
url: this.url,
data: 'code=' + this.code,
success: function (data) {
if ('0' == data.erron) {
_this.res[0].details.push(data.data);
_this.$forceUpdate();
} else {
_this.res[0].details.push({ NAME: ''});
console.log(data.msg)
_this.$forceUpdate();
return;
}
}.bind(this),
failed: function (err) {
alert('请求失败' + err.status);
return;
}
});
}