Vue.js项目：后端数据获取成功，前端却显示为空？
在Vue.js开发中，经常遇到后端接口返回数据正常，但前端页面却显示为空的情况。本文通过一个案例分析，解释此问题的原因并提供解决方案。
案例中，开发者使用$axios获取后端数据，并将数据赋值给tabledata变量，再经过一系列处理后显示在前端。loadget方法负责从/goods/list接口获取数据，getnew方法对tabledata进行排序和截取。尽管console.log(res)和console.log(this.tabledata)显示数据已获取，但前端仍为空。
问题在于getnew和loadget方法的执行顺序以及异步操作。created生命周期钩子函数先执行getnew，再执行loadget。由于$axios.get是异步请求，getnew在loadget完成数据获取前就已执行，导致tabledata为空，最终导致前端显示为空。
立即学习“前端免费学习笔记（深入）”；
解决方案：调整getnew方法的执行时机。将其移至loadget方法的成功回调函数中，确保tabledata已赋值后再执行getnew。修改后的代码如下：
loadGet() {
this.$axios.get(this.$httpUrl+'/goods/list').then(res => res.data).then(res => {
console.log(res)
if(res.code == 200){ // 后端数据获取成功
this.tableData=res.data // 数据赋值
console.log(this.tableData)
this.getNew(); // 将getNew()方法移至此处
}else{
alert("获取数据失败")
}
})
}
通过此修改，getnew在tabledata赋值后执行，从而解决前端显示为空的问题，确保前端正确显示后端数据。
