Vuetify - Custom data table - Potential infinite loop: exceeded 10001 iterations

1
votes

As the default Vuetify v-data-table component doesn't have a numbered pagination and select page dropdown built-in, I decided to make my own wrapper component, genericTable.vue.

Everything is looking the way I want. However, I encounter the following issue:

Potential infinite loop: exceeded 10001 iterations.

Note: I want the genericTable component to be a dumb component, meaning it accepts props and emits events to allow them to be dynamic and reusable. As soon as a user selects a page or changes the items per page, an event is emitted from the genericTable component to the parent component.

Sandbox

https://codesandbox.io/s/mutable-frog-rb2v8

Snippet

// genericTable.vue

<genericTable
    :page="currentPage"
    :pageNumbers="pageNumbers"
    :headers="headers"
    :items="items"
    :totalItems="totalItems"
    :pageCount="pageCount"
    :itemsPerPage="itemsPerPage"
    @update:page="pageUpdated"
    @update:itemsPerPage="itemsPerPageUpdated">
</genericTable>
1
javascriptvue.jsvuejs2vuetify.js

1 Answers

1
votes

What i saw, your problem is computed property pageCount, I replaced this.items.length with itemsPerPage

pageCount() {
      return Math.ceil(this.totalItems / this.itemsPerPage) || 0;
    },

If items were less than your itemsPerPage they return miscalculation. To show the last page in codesandbox, also you need to request the correct size of items

      let size = this.itemsPerPage;
      // For last page, if our request size is more than totalItems
      // we need to return totalItems % itemsPerPage
      if(this.itemsPerPage * this.currentPage > this.totalItems )
        size = this.totalItems % this.itemsPerPage;
      this.fetchPassengers(this.currentPage, size);