Vue获取到后台值，但是前端页面不显示、不报错(axios的巨坑)

前端调用后端，通过日志打印是有值的，但就是不显示

最终原因是axios，then里面是异步返回数据，需要首先整个获取axios，之后再获取返回值
获取不到值代码如下：

修改之后代码：

源码

/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
<template>
  <div>
  <el-table
    :data="sportData"
    border
    fit:true
    stripe
    :span-method="objectSpanMethod"
    style="width: 100%">
    <el-table-column
      prop="sportName"
      label="运动类型"
      width="180" align="center">
    </el-table-column>
    <el-table-column
      prop="sportdCount"
      label="运动天数"
      width="180" align="center">
    </el-table-column>
    <el-table-column
      prop="sportCount"
      label="运动次数"
      width="180" align="center">
    </el-table-column>
    <el-table-column
      prop="maxRecord"
      label="最高记录(连续次数/单次最高记录)"
      align="center"
      >
    </el-table-column>
    <el-table-column
      prop="nowWeight"
      label="今日体重"
      width="180" align="center">
    </el-table-column>
  </el-table>
  </div>
</template>

<script>
  export default {
    name: 'list',
    data() {
      debugger
      return {
        sportData:[]
      }
    },methods: {
      objectSpanMethod({ columnIndex }) {
        if (columnIndex === 4) {
          debugger
          return {
            rowspan: 4,
            colspan: 1
          };
        }
      },
      getTableData(){
        debugger
        return this.$axios({
        method: "get",
        url: "/sport/statistics",
        contentType: "application/json;chart=utf-8"
        }).then((res) => {
          debugger
          return res.data.data 
        })
      }
    },mounted() {
        this.getTableData().then((res)=>{this.sportData = res }) //此出先调用getTable()拿到axios的数据，然后在.then()出来结果
    }
  }
  
</script>