javascript - 带有 http 请求的 Vue.js 分页
问题描述
我有分页导航组件的表格:
<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
。为此,我在方法中调用getTrades
方法linkGen
。
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"
}
]
}
解决方案
好的,我自己找到了解决方案。首先,需要使用 pagination 而不是 pagination-nav。并添加事件监听器@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);
},
推荐阅读
- python - 如何使用第一个解决方案策略作为本地搜索元启发式的初始解决方案?
- windows - 如何使用 power-shell 将登录下的用户列为服务本地安全策略
- ios - React Native IOS Archive 不适用于 React Native 新版本
- powershell - 缺少 PowerShell 类方法描述
- php - 如何在刀片中调用此值
- python - 从 GStreamer 实时接收 Numpy 数组
- asp.net-core - ASP.NET Core UserManager 中的取消
- python - Python:requests.exceptions.ConnectionError: HTTPConnectionPool(),Max retries exceeded with url
- r - lrm 警告“当前权重被忽略”
- json - 如何用jq过滤和替换json中的值