Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 140161

Vue: Array with data is overfilled on pagination

$
0
0

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

Viewing all articles
Browse latest Browse all 140161

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>