How to paginate simply by using vue js?
In this tutorial I will show you how to Add custom Pagination in a vue component.
<template>
<div id="app">
<table>
<thead>
<th>#</th>
<th>Name</th>
<th>Age</th>
</thead>
<tbody>
<tr v-for="(item, index) in currentList" :key="index">
<td>{{ item.index }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
<button v-on:click="previousPage()" v-if="currentPage > 1">previous</button>
<button v-on:click="nextPage()">Next</button>
</div>
</template>
<script>
export default {
created() {
this.persons.map((n) => {
this.num++;
n.index = this.num;
return n;
});
this.makeCurrentList();
},
data() {
return {
persons: [
{ name: "kapil", age: 22 },
{ name: "pulkit", age: 23 },
{ name: "rajat", age: 24 },
{ name: "raj", age: 25 },
{ name: "ankit", age: 26 },
{ name: "abhay", age: 27 },
{ name: "anmol", age: 28 },
{ name: "ishaan", age: 29 },
{ name: "ayush", age: 30 },
{ name: "rajat", age: 24 },
{ name: "raj", age: 25 },
{ name: "ankit", age: 26 },
{ name: "abhay", age: 27 },
{ name: "anmol", age: 28 },
{ name: "kapil", age: 22 },
{ name: "pulkit", age: 23 },
{ name: "rajat", age: 24 },
{ name: "raj", age: 25 },
{ name: "ankit", age: 26 },
{ name: "abhay", age: 69 },
],
itemPerPage: 5,
currentPage: 1,
currentList: [],
startIndex: null,
num: 0,
};
},
methods: {
previousPage() {
this.currentPage--;
this.makeCurrentList(this.currentPage);
},
nextPage() {
this.currentPage++;
this.makeCurrentList(this.currentPage);
},
makeCurrentList() {
this.currentList = [];
console.log(this.currentPage);
this.startIndex = this.currentPage * this.itemPerPage - this.itemPerPage;
this.currentList = this.persons.slice(
this.startIndex,
this.currentPage * this.itemPerPage
);
console.log("start Index => ", this.startIndex);
console.log("current Page => ", this.currentPage);
console.log("Current List => ", this.currentList);
},
},
name: "App",
components: {},
};
</script>
Top comments (0)