Vue.js pagination with http requests

I have table with pagination-nav component:

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

I get table content using method getTrades with http request to json API:

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

Where every ${page} corresponds certain slice of data. Server-side code and requests work fine. Now I want to pass page number from button clicked to method getTrades. For this purpose I call getTrades method inside linkGenmethod.

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

Instead of right page number I get random value from a page numbers list. Console.log print out several times random values from the list but nonetheless linkGen returns right value of page number.

EDIT: added detailed code

Template section:

<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 section:

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

Server response example:

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

Answer

Ok, I found a solution by myself. First, it is necessary to use pagination instead of pagination-nav. And add event listener @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>

Second, in callback function loadPage we use a page number passed from button to get necessary part of data from API.

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

Advertisement

Answer