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赋值后执行，从而解决前端显示为空的问题，确保前端正确显示后端数据。
以上就是Vue.js项目中，后端数据已获取但前端显示为空，该如何解决？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
572
收藏
