vue分页无效，vue3分页无效，vuexy分页

Question

请各位看下，为什么table只加载第一页，点击第二页或第三页table显示为空。明明有数据返回啊

<template>
  <section id="dashboard-analytics">
    


    <b-row>
      <b-col cols="12">
        <ecommerce-statistics :data="data.statisticsItems" />
      </b-col>
    </b-row>


    
    <b-row>
      <b-col cols="12">
        <ecommerce-profit-chart :data="data.statisticsProfit" />
      </b-col>
    </b-row>
    
    <b-row>
      <b-col cols="12">
        

        <b-card title="测试记录">
          <b-table responsive :items="tabledata" class="mb-0" :per-page="perPage" :current-page="currentPage">

          </b-table>
          <b-col cols="12">
            <b-pagination @change="changePage" v-model="currentPage" :total-rows="totalRows" :per-page="perPage"
              align="center" size="sm" class="my-0" />
          </b-col>
        </b-card>



      </b-col>
    </b-row>
  </section>
</template>

<script>
  import {
    BFormGroup, BFormInput, BFormCheckbox, BForm, BButton, BInputGroup, BInputGroupPrepend, BRow, BCol,
    BCard, BCardText, BFormSelect, BTable, BPagination,
  } from 'bootstrap-vue'
  import { ref, watch, computed } from '@vue/composition-api'
  //报表组件
  import EcommerceProfitChart from '@/views/dashboard/ecommerce/EcommerceProfitChart.vue'
  //报表组件
  import EcommerceStatistics from '@/views/kungfu/dashboard/ecommerce/EcommerceStatistics.vue'


  export default {

    components: {

      EcommerceStatistics,
      BRow,
      BCol,
      BFormGroup,
      BFormInput,
      BFormCheckbox,
      BInputGroup,
      BInputGroupPrepend,
      BForm,
      BButton,
      BCard, BCardText, BFormSelect, BTable, BPagination, EcommerceProfitChart


    },
    data() {
      return {

        data: {},
        filter: null,
        filterOn: [],
        pageOptions: [3, 5, 10],
        totalRows: 1,
        //pageNo
        currentPage: 1,
        //pageSize
        perPage: 10,

        attakType: 4,
        dateNtim: null,
        fields: [
          '邮箱',
          'IP',
          '端口',
          '类型',
          '状态',
          '时间',
        ],
        tabledata: [],
        selected4server: 'SERVER01',
        selected4method: 'TCP',
        selected7method: 'HTTP',
        options: [
          { value: 'SERVER01', text: 'SERVER01' },
          { value: 'SERVER02', text: 'SERVER02' },
        ],
        options1: [
          { value: 'TCP', text: 'TCP' },
          { value: 'UDP', text: 'UDP' },
        ],
        attakMethod7: [
          { value: 'HTTP', text: 'HTTP' },
          { value: 'ACK', text: 'ACK' },
          { value: 'SYN', text: 'SYN' },
        ],

      }
    },
    mounted() {
      this.initTableData();
    },


    created() {

      // data
      this.$http.get('/ecommerce/data')
        .then(response => {
          this.data = response.data
          console.log(this.data)
        })

    },
    methods: {
      //kFormatter, 
      onFiltered(filteredItems) {
        // 触发分页以更新由于过滤而产生的按钮/页面数量
        this.totalRows = filteredItems.length
        this.currentPage = 1
      },

      changePage(pager) {
        this.currentPage = pager;
        this.initTableData()
      },
      async initTableData(pager) {
        let request = {}
        console.log("currentPage:" + this.currentPage)
        request.pageNo = this.currentPage;
        request.pageSize = this.perPage;
        await this.$axios.post('/kungfu/attak/list', request).then(response => {
          console.log(response)
          this.tabledata = response.data.data.data;
          this.totalRows = response.data.data.total;
          console.log(this.tabledata)
        })


      }
    },
  }


</script>
<style lang="scss">
  /* 时间组件的css */
  @import "@core/scss/vue/libs/vue-flatpicker.scss";
  /* 报表的css */
  @import '@core/scss/vue/pages/dashboard-ecommerce.scss';
  @import '@core/scss/vue/libs/chart-apex.scss';
</style>
```html

```

Answer 1

有可能是你这儿请求的时候用了异步函数，数据还没返回就直接加载了