Pagination in Vue.js

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 start = this.pageNumber * this.size,
          end = start + this.size;

     return this.listData.slice(start, end);
}

Edit: I was initially doing something funky to copy the array while using .splice. Using .slice is the better approach. Thanks Alexander Karelas.

And for the template:

<div>
  <ul>
    <li v-for="p in paginatedData">
      {{p.first}} 
      {{p.last}}  
      {{p.suffix}}
    </li>
  </ul>
  <button @click="prevPage">
    Previous
  </button>
  <button @click="nextPage">
    Next
  </button>
</div>

I want to prevent the buttons from working when they should. For the prevPage button, I will add :disabled="pageNumber==0" and for the nextPage button, I will add :disabled="pageNumber >= pagecount -1".

A working demo of my component: