[Vuejs]-Vuetify.js multiple pagination on the page

0👍

You can create an array that has the same length of yours fieldsData.

Example:

...
  watch: {
    fieldsData (value) {
      this.paginations = value.map(() => ({
        page: 1,
        pageCount: 0
      }))
    }
  }
...
<v-data-iterator
  :items="fieldData.data"
  :page.sync="paginations[index].page"
  :items-per-page="itemsPerPage"
  hide-default-footer
  @page-count="paginations[index].pageCount = $event"
>
...
<v-pagination
  v-model="paginations[index].page"
  :length="paginations[index].pageCount"
></v-pagination>

Fiddle Example

Or alternatively, you can just create a new component (which I think is a better way).

Fiddle Example

Leave a comment