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 linkGen
method.
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"
}
]
}
Ok, I found a solution by myself. First, it is necessary to use pagination instead of pagination-nav. And add event listener
@change
Second, in callback function
loadPage
we use a page number passed from button to get necessary part of data from API.