vue从后台获取新数据后刷新_11.Vue中使用Ajax获取数据后界面未更新，使用$forceUpdate()强制更新...

有个页面在加载后要从后台获取数据，然后显示

不过好像是数据层次有点多？像下面这样，获取的数据放在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;

}

});

}