分页将值重置为 1 bootstrap-vue
Posted
技术标签:
【中文标题】分页将值重置为 1 bootstrap-vue【英文标题】：Pagination reset value to 1 bootstrap-vue 【发布时间】：2021-08-29 23:55:13 【问题描述】：我通过使用 axios 在表中显示 API 命中的数据，制作了一个用于错误跟踪的仪表板。不幸的是，有一个错误，当我进一步导航时，分页页面值总是重置为 1
如您所见，REQUESTID 列中的第一个数据以 H764 开头，当我单击 > 按钮时，它变成了这样
它显示了已命中的 API 数据的第二页，但它保持分页值精确为 1，在 REQUESTID 列中以 U707 开头的不同数据。
<script>
// eslint-disable-next-line no-unused-vars
import getAllProvinces from '~/api/delivery'
export default
data()
return
filter: null,
filterOn: [],
perPage: 0,
currentPage: 1,
rows: 0,
items: [],
fields: [
key: 'id',
sortable: true,
label: 'ID',
class: 'truncate',
,
key: 'uploadReference',
sortable: true,
label: 'Upload Reference',
class: 'truncate',
,
key: 'requestId',
sortable: true,
label: 'Request ID',
class: 'truncate',
,
key: 'storeCode',
sortable: true,
label: 'Store Code',
class: 'truncate',
,
key: 'branchCode',
sortable: true,
label: 'Branch Code',
class: 'truncate',
,
key: 'b2bId',
sortable: true,
label: 'B2B ID',
class: 'truncate',
,
key: 'request',
sortable: true,
label: 'Request',
class: 'truncate',
,
key: 'response',
sortable: true,
label: 'Response',
class: 'truncate',
,
key: 'createDate',
sortable: true,
label: 'Create Date',
class: 'truncate',
,
key: 'errorClassification',
sortable: true,
label: 'Error Classification',
class: 'truncate',
,
],
,
watch:
currentPage:
handler(value)
this.getAllStock()
,
,
,
created()
this.getAllStock()
,
methods:
getAllStock()
this.$axios
.get(
'axioslink?requestPage=' +
this.currentPage +
'&status=1'
)
.then((res) =>
// eslint-disable-next-line no-console
console.log(res.data)
this.items = res.data.stocks
this.allStock = res.data
this.rows = res.data.totalDocuments
// eslint-disable-next-line no-console
)
this.rows = this.items.length
//this is used to show remaining data in table, since it only wants to display 10 data per page
,
onFiltered(filteredItems)
this.rows = filteredItems.length
this.currentPage = 1
,
,
</script>
<b-card body>
<b-card-header class="border-0">
<h3 class="mb-0">Stock List</h3>
</b-card-header>
<template>
<p class="mt-3">Current Page: currentPage </p>
<div class="text-center">
<b-table
id="my-table"
:per-page="perPage"
:current-page="currentPage"
striped
small
hover
dark
responsive
show-empty
:items="items"
:fields="fields"
:filter="filter"
:filter-included-fields="filterOn"
@filtered="onFiltered"
>
<template v-slot:cell()="data">
<span v-b-tooltip.hover :title="data.value">
data.value
</span>
</template>
</b-table>
</div>
</template>
<div class="overflow-auto">
<b-card-footer class="py-4 d-flex justify-content-end">
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
aria-controls="my-table"
></b-pagination>
</b-card-footer>
</div>
</b-card>
【问题讨论】：
【参考方案1】：您的perPage 为 0，因此页码始终为 1。
export default
data()
return
filter: null,
filterOn: [],
perPage: 0, // Bug here
currentPage: 1,
...
【讨论】：
无论我将 perPage 设置为 0 还是 10，它仍然具有相同的输出【参考方案2】：我准备了一个代码 sn-p 来重现您的问题。请看看这个sn-p，看看它是否能解决你的问题。
我更改了perPage 的值并删除了axios 用于测试并使用setTimeout 模拟axios 行为。
new Vue(
el: '#app',
data()
return
filter: null,
filterOn: [],
perPage: 2,
currentPage: 1,
rows: 0,
items: [],
fields: [
key: 'id',
sortable: true,
label: 'ID',
class: 'truncate',
,
key: 'uploadReference',
sortable: true,
label: 'Upload Reference',
class: 'truncate',
,
],
,
watch:
currentPage:
handler(value)
this.getAllStock()
,
,
,
created()
this.getAllStock()
,
methods:
getAllStock()
setTimeout(() =>
this.items = [
id: 1,
uploadReference: "TEXT"
,
id: 2,
uploadReference: "TEXT"
,
id: 3,
uploadReference: "TEXT"
,
id: 4,
uploadReference: "TEXT"
,
id: 5,
uploadReference: "TEXT"
,
id: 6,
uploadReference: "TEXT"
]
this.rows = this.items.length
, 1000)
,
onFiltered(filteredItems)
this.rows = filteredItems.length
this.currentPage = 1
,
,
)#app
padding: 20px;
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>
<div id="app">
<b-card body>
<b-card-header class="border-0">
<h3 class="mb-0">Stock List</h3>
</b-card-header>
<template>
<p class="mt-3">Current Page: currentPage </p>
<div class="text-center">
<b-table
id="my-table"
:per-page="perPage"
:current-page="currentPage"
striped
small
hover
dark
responsive
show-empty
:items="items"
:fields="fields"
:filter="filter"
:filter-included-fields="filterOn"
@filtered="onFiltered"
>
<template v-slot:cell()="data">
<span v-b-tooltip.hover :title="data.value">
data.value
</span>
</template>
</b-table>
</div>
</template>
<div class="overflow-auto">
<b-card-footer class="py-4 d-flex justify-content-end">
<b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage" aria-controls="my-table"></b-pagination>
</b-card-footer>
</div>
</b-card>
</div>【讨论】：
以上是关于分页将值重置为 1 bootstrap-vue的主要内容，如果未能解决你的问题，请参考以下文章