'Why Do I use :server-items-length" props at vuetify

Hello I'm using vuetify to implement pagination by using <v-data-table> and <v-pagination> I wonder why :server-items-length prop is used when requesting data from the backend. Previously, I implemented it by using @page-count in v-data-table and pageCount as prop in v-pagination. I am curious about the difference between the two methods and the advantages of using server-items-length.

before

 <v-data-table
      :headers="headers"
      :items="items"
      :search="search"
      :items-per-page="itemsPerPage"
      @page-count="pageCount = $event"></v-data-table>

<v-pagination v-model="page"
        :length="pageCount"
        :total-visible="totalVisible">

after

<v-data-table
  :headers="headers"
  :items="items"
  :server-items-length="postLenth">

<v-pagination v-model="page" :length="pageCount" :total-visible="10"


Solution 1:[1]

When pagination is done locally in the client by Vuetify, Vuetify already has all the items and can count the total length of the items and divide it into pages, using items-per-page prop.

But, when pagination is done on the server-side, Vuetify might only have items for the one page and needs information about the total length of the items in DB, to be able to display the total amount of pages.

Passing server-items-length prop will tell Vuetify how many items there are in total.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Elar Saks