Vue.js项目中，后端数据已获取但前端显示为空，该如何解决？

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("获取数据失败")        }    })}

登录后复制