I need to know how to add pagination with vue.js? - node.js

Question

I Have html+javascript that requests from mongodb database some games(game1,2,3,4,5,6)just simple database with alot of games.
I want to know how via vue.js i can do pagination that per page show 4games.?
const SEARCH = new Vue({
el: '#search',
data: {
query: {
name: '',
max_price:0,
game_category:'',
game_publisher:'',
},
games: [] // current list of games. we re-fill this array after search
},
methods: {
btn_search: function () {
// now we know that this.query is our search critearia object
// so we can do fetch, and will do.
fetch('/search?json=' + JSON.stringify(this.query))
.then((response) => { //as you remember - res is a buffer.
return response.text();
})
.then((text_response) => {
console.log('got response!');
let games_from_server = JSON.parse(text_response);
this.games.splice(0, this.games.length); //it will remove all elemtns from array remove all elemtns from array
// and add games from server one by one.
for (let i = 0; i < games_from_server.length; i++) {
this.games.push(games_from_server[i]);
}
});
console.log(this.query);
}
}
});
console.log('pew?');

Answer 1

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.