I am having a wierd issue with pagination on Vue
The code below makes a call to server to retrieve paginated data
findSprints(offset) {
this.$store.dispatch('findSprints', {
projectId: this.prId,
offset: offset,
limit: this.perPage
}).then(() => {
this.errorMessage = this.getError;
if (this.errorMessage.length) {
this.errorOccurred = true;
} else {
for (let i = 0; i < this.getSprints.length; i++) {
this.sprints.push({
id: this.getSprints[i].id,
sprintName: this.getSprints[i].name,
sprintStartDate:
this.formatDate(new Date(this.getSprints[i].startDate)),
sprintEndDate:
this.formatDate(new Date(this.getSprints[i].endDate)),
});
}
}
});
}
Basically the code works well, but there is an issue when I am having the following case:
Let's say I have in DB 6 elements. Page size is 5. When I load the table first five elements are on page 1 and one more element is on page 2. If go back from page 2 to page 1 and then return back to page 2 I see the element which must be there + first four elements from page 1.
In browser console I can see that on the second call of page 2 the number of elements is bigger than needed. The data loaded to the store is correct.
Question: how to correctly fill data to avoid this issue?
UPD(markup):
<b-table
id="sprintTable"
hover
responsive
:items="sprints"
:fields="spFields"
:per-page="perPage"
:current-page="spCurrentPage">
<template v-slot:cell(sprintName)="data">
<b-button variant="link" @click="viewTasks(data.item.id)">{{data.item.sprintName}}</b-button>
</template>
<template v-slot:cell(sprintActions)="data" v-if="isEditable">
<b-button-group>
<b-button variant="warning" @click="handleEdit(data.item.id)">Edit</b-button>
<b-button variant="danger" @click="handleDelete(data.item.id)">Delete</b-button>
</b-button-group>
</template>
</b-table>
<b-pagination
v-model="spCurrentPage"
:total-rows="totalSprints"
@input="loadNextSprints(spCurrentPage-1)"
:per-page="perPage"
aria-controls="sprintTable"/>