[Vuejs]-Why incorrectly calculated pagination?

0๐Ÿ‘

โœ…

Hi

Problem 1

you can easily make the pageNumber start from 1.

Solution

Just change the paginatedData() function so that it stars slicing from 0.

        paginatedData(){
            const start = (this.pageNumber - 1) * this.pageSize // --> here
            const end = start + this.pageSize
            return this.filteredUsers.slice(start, end)
        },

and set pageNumber: 1,

Problem 2

Problem 2 will most probably solve itself once 1 and 3 are corrected.

Problem 3

As @tgreen suggested you should set this.pageNumber = 1 when user changes pagesize. Otherwise
if you are at page 5 and user changes pagesize, according to above code pageNumber is unchanged and you can easily see that paginatedData() will return 0. Thus explaining no items seen.

Solution

set this.pageNumber = 1 when user changes pageSize
Also change isNextPageDisabled() to this

    isPrevPageDisabled() {
        return this.pageNumber == 1
    },

Leave a comment