Javascript 使用http请求进行Vue.js分页

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

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

其中，每个${page}对应于特定的数据片。服务器端代码和请求工作正常。现在我想将页码从单击的按钮传递到方法

getTrades

。为此，我在

linkGen

方法中调用

getTrades

方法

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>

---

好的，我自己找到了解决办法。首先，必须使用分页 而不是分页导航。并添加事件侦听器

@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>

---

你能发布更多的代码吗？是的，当然。你在用引导程序吗？是的，我好像用了一些原始引导程序行。我是否必须在任何地方使用bootstap vue？它能解决问题吗？

<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", 
      "Date": "15.08.2020", 
      "Fee": 1.0, 
      "Operation": "Buy", 
      "Order": 61310216, 
      "Price": 1726.8, 
      "Qty": 1.0, 
      "Time": "21:34:17"
    }
  ]
}

<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(pageNum) {
  this.getTrades(pageNum);
},