Pagination in Vue.js
Pagination enhances UX by allowing users to visualize data in smaller chunks, or pages. Here’s how to go about making a Vue.js component with pagination that allows us to only view parts of our data at a time.
I’ll go piece by piece in our JavaScript object first, and then show the template.
The only local data I need is the page number.
data(){
return {
pageNumber: 0 // default to page 0
}
}
For props, passing the data is a must, but I’ll also take a size argument for the max number of records.
props:{
listData:{
type:Array,
required:true
},
size:{
type:Number,
required:false,
default: 10
}
}
For my methods, I’ll use methods to go to the previous and next pages:
methods:{
nextPage(){
this.pageNumber++;
},
prevPage(){
this.pageNumber--;
}
}
A quick computed property to figure out how many pages there are:
pageCount(){
let l = this.listData.length,
s = this.size;
return Math.ceil(l/s);
}
Now, the paginatedData
computed property is where it comes together. This is the filtered data that will be rendered.
paginatedData(){
const…