猿问

vue easytable axios 数据赋值问题

我测试下来目前怀疑是javascript 异步执行的原因 。怀疑就是axios 还没执行完,赋值就已经发生了。
我先自己测试尝试解决。

1.我用VUE的 easytable 想加个 footer 的数据汇总,不知道怎样可以获取到table 数据。 
easytable 说明: 
http://doc.huangsw.com/vue-ea...

2.代码: 
tableData: 是VUE,data中定义的一个空数组。 
.
下面这个函数是定义在VUE,Methods,用来求和计算的:
setFooterData () {

axios.get('/asset/hosts').then(res => { this.tableData = res.data })

console.log('========\n', this.tableData)

let Cost111 = this.tableData.map(item => {

return item.CostByMonth

})

...(后面的省去)}

3.问题: 
我没有想明白的问题是:为什么axios.get() 之后那一句 console.log 打印出来的 this.tableData 是空的数组。 
导致我后面Cost111 获取不到数据。
axios.get函数里面的 this.tableData 数据实际是获取到的。只是setFooterData() 这个函数里面我不知道如何获取保存这个axios得到的响应数据tableData。

4.不知道讲问题明白了没,小弟愚笨,非程序员出身,都是自学捣鼓的,也没有人可以交流,路走的很苦,希望有人指点一二。


慕运维8079593
浏览 595回答 1
1回答

HUWWW

解决了,的确是因为js异步执行的原因,原来的写法,axios.get的响应返回前,后面的程序已经被执行了。 改成下面的可以实现功能。 目前没想明白的是为社么这个 this.setFoorerData()需要在this.request()后面再写一遍,否则不出现footer.created () {    axios.get('/asset/hosts').then(res => { this.tableData = res.data; this.setFooterData() })    this.request()    this.setFooterData()    //}
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答