javascript - 后端数据获取后前端显示为空的问题？

Question

import MyPanel from "@/components/Shop/MyPanel";    import AppMore from "@/components/Shop/AppMore";    import Mylist from "@/components/Shop/Mylist";    export default {        name: "AppGoods",        components: {Mylist, AppMore, MyPanel},        data(){            return{                tableData:[],                allnewgoods:[],                newgoods: [],            }        },        methods:{            getNew(){                console.log(this.tableData)                this.allnewgoods = this.tableData.sort( function sortData(a, b){                    return new Date(b.ctime).getTime() - new Date(a.ctime).getTime()                });                // console.log(this.allnewgoods)                this.newgoods=this.allnewgoods.slice(0,4)            },            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)                    }else{                        alert("获取数据失败")                    }                })            }        },        created() {            this.getNew();            this.loadGet();        }    }

为什么可以获取后端数据，但是要绑定的时候就显示空值

绑定数据会显示但是也会报错

Answer 1

1、你先执行的getNew，再执行的loadGet
2、loadGet中的$axios.get是一个异步请求(如果不知道什么是异步，可以百度下)

你应该在this.tableData=res.data给tableData赋值之后，再运行getNew