带有 http 请求的 Vue.js 分页答案

【问题标题】：Vue.js pagination with http requests带有 http 请求的 Vue.js 分页
【发布时间】：2021-01-26 05:58:36
【问题描述】：

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

<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。为此，我在linkGenmethod 中调用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>

脚本部分：

<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"
    }
  ]
}

【问题讨论】：

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

标签： javascript vue.js pagination bootstrap-vue

【解决方案1】：

好的，我自己找到了解决方案。一、需要使用分页而不是分页导航。并添加事件监听@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);
},

【讨论】：