带有 http 请求的 Vue.js 分页

Posted 2023-02-22

【中文标题】带有 http 请求的 Vue.js 分页

【英文标题】：Vue.js pagination with http requests

【发布时间】：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 吗？能解决问题吗？

【参考方案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);
,