[Vuejs]-I need to know how to add pagination with vue.js?

0👍

If you want to do a client-side pagination you can do it this way:

In your data add currentPage: 1 and gamesPerPage:

data() {
   return {
      currentPage: 1,
      gamesPerPage: 4,
      games: []
   }
}

then add a computed property paginatedGames which is your games property split into pages, a currentPageGames property which filters games in current page and changePage method which changes your page:

computed: {
   paginatedGames() {
      let page = 1;
      return [].concat.apply(
         [], 
         this.games.map( (game, index) => 
            index % this.gamesPerPage ? 
               [] : 
               { page: page++, games: this.games.slice(index, index + this.gamesPerPage)}
         )
       );
   },
   currentPageGames() {
      let currentPageGames = this.paginatedGames.find(pages => pages.page == this.currentPage);
        return currentPageGames ? currentPageGames.games : [];
   }
},
methods {
   changePage(pageNumber) {
      if(pageNumber !== this.currentPage)
           this.currentPage = pageNumber;
   }
}

Complete example: http://jsfiddle.net/eywraw8t/217989/

However, if your database has lots of games, it might be a better idea to implement a server-side pagination and fetch games only for requested page.

Leave a comment