Easy and Simple Pagination in Vue

<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>