Vue.js与HTTP请求分页

问题描述

我有一个带有分页导航组件的表：

<b-pagination-nav :link-gen="linkGen"
  limit="5" :number-of-pages="10" use-router>
</b-pagination-nav>

我使用方法getTrades通过JSON API的http请求获得表内容：

axios.get(`http://localhost:5000/Trades/page/${page}`)

每个$ {page}对应特定的数据片段。服务器端代码和请求工作正常。现在，我想将单击按钮的页码传递给方法getTrades。为此，我在getTrades方法内调用了linkGen方法。

linkGen(pageNum) {
  console.log(pageNum);
  this.getTrades(pageNum);
  return pageNum === 1 ? '?' : `?page=${pageNum}`;
},

我从正确的页码列表中获得了随机值，而不是正确的页码。 Console.log从列表中打印出几次随机值，但是linkGen返回正确的页码值。

编辑：添加了详细的代码

模板部分：

<template>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <div class="Trades">
          <table id="header-fixed" class="table table-bordered table-sm">
            <thead class="thead-dark">
                <tr>
                  <th scope="col">Date</th>
                  <th scope="col">Time</th>
                  <th scope="col">Asset</th>
                  <th scope="col">Qty</th>
                  <th scope="col">Price</th>
                  <th scope="col">Operation</th>
                  <th scope="col">Order</th>
                  <th scope="col">Fee</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(Trade,index) in Trades" :key="index">
                  <td>{{ Trade.Date }}</td>
                  <td>{{ Trade.Time }}</td>
                  <td>{{ Trade.Asset }}</td>
                  <td>{{ Trade.Qty }}</td>
                  <td>{{ Trade.Price }}</td>
                  <td>{{ Trade.Operation }}</td>
                  <td>{{ Trade.Order }}</td>
                  <td>{{ Trade.Fee }}</td>
                </tr>
            </tbody>
        </table>
        </div>
        <div class="overflow-auto">
          <b-pagination-nav :link-gen="linkGen"
            limit="5" :number-of-pages="10" use-router>
          </b-pagination-nav>
        </div>
      </div>
    </div>
  </div>
</template>

脚本部分：

<script>
import axios from 'axios';

export default {
  data() {
    return {
      Trades: [],};
  },created() {
    this.getTrades();
  },methods: {
    getTrades(page = 1) {
      axios.get(`http://localhost:5000/Trades/page/${page}`)
        .then((res) => {
          this.Trades = res.data.Trades;
        })
        .catch((error) => {
          console.error(error);
        });
    },linkGen(pageNum) {
      console.log(pageNum);
      this.getTrades(pageNum);
      return pageNum === 1 ? '?' : `?page=${pageNum}`;
    },},};
</script>

服务器响应示例：

{
  "status": "success","Trades": [
    {
      "Asset": "GOLD-12.20","Date": "15.08.2020","Fee": 1.0,"Operation": "Sell","Order": 61310215,"Price": 1726.8,"Qty": 1.0,"Time": "21:34:17"
    },{
      "Asset": "GOLD-12.20","Operation": "Buy","Order": 61310216,"Time": "21:34:17"
    }
  ]
}

解决方法

好的，我自己找到了解决方案。首先，有必要使用分页 而不是分页导航。并添加事件监听器@change

<b-pagination
  v-model="currentPage"
  :total-rows="rows"
  :per-page="perPage"
  first-text="First"
  prev-text="Prev"
  next-text="Next"
  last-text="Last"
  @change="loadPage"
></b-pagination>

第二，在回调函数loadPage中，我们使用从按钮传递的页码从API获取必要的数据部分。

loadPage(pageNum) {
  this.getTrades(pageNum);
},