How can I avoid table from being empty even I change the show entries to 10/25/50/100 and click the pagination?

Question

When I select or change the number of rows to 25 from show entries and I click the 2 from my pagination Previous 123 Next then back to the minimum page which 10 from show entries I get an empty table. How can I avoid table from being empty even I change the show entries to 10/25/50/100 and click the pagination number? Here's my jsfiddle -> https://jsfiddle.net/ka6t8du1/8/

 pagination : function(activePage) {
    this.currentPage = activePage;
    this.startIndex = (this.currentPage * this.show_entries) - 
    this.show_entries;
    this.endIndex = parseInt(this.startIndex) + 
    parseInt(this.show_entries);
  },
  previous: function() {
    if (this.currentPage > 1) {
      this.pagination(this.currentPage - 1);
    }

  },
  nextCategory: function() {
 if (this.currentPage < this.totalCategory) {
   this.pagination(this.currentPage + 1);
 }
  },
  showEntries: function(value) {
        this.endIndex = value ;
    }
  },
  computed : {
      totalCategory: function() {
        return Math.ceil(this.categories.length / this.show_entries)
    }
  }

Answer 1

Your startIndex & endIndex are set to the same value when you go back to the minimum value from a larger value. So the condition in <tr ..... v-if="index >= startIndex && index < endIndex"> fails and no records are displayed. Simply reset the pagination to the first page so the indexes are re-calculated.

showEntries: function (value) {
   this.endIndex = value;
   this.pagination(1);
}