[Vuejs]-Vue.js application bug: paginating search results fails

by

0👍

✅

In order to make the pagination work together with the filtering you need to combine the pagination logic with your searchResults in displayedUsers

displayedUsers() {
    return this.paginate(this.searchResults);
},

Then you will need to use displayedUsers everywhere where you are interested the combined result, so in your template:

<tr v-for="(user, index) in displayedUsers">

There is one more thing to fix in your code: the number of pages currently always uses the original user count, which has to be updated to use the “current” user count:

setPages(users) {
    this.pages.length = 0; //we need to clear the previously set pages
    var numberOfPages = Math.ceil(users.length / this.perPage);
    for (var index = 1; index <= numberOfPages; index++) {
       this.pages.push(index);
    }
},

And update the pages whenever the dispayedUsers are changed:

watch: {
    displayedUsers() {
        this.setPages(this.searchResults);
    }
},

If you also want to reset the page when on search you just need to set the page in searchResults

searchResults() {
    this.page = 1;
    return this.users.filter((user) => {
        return user.name.first.match(this.search);
      });
}

Working JSFiddle.

👤nemesv

Leave a comment