Vuetify external pagination not displaying page numbers

Question

I have a v-data-table and I'm trying to add pagination to it. I've followed the example docs here I can't see what I'm doing wrong. When my component is created it makes a call to my backend to populate a list of items. Then this is passed to the data table.

I also have a search bar and if I enter anything in it the page numbers pop up then.

HTML

<v-data-table
      :headers="headers"
      :items="incidents"
      :search="search"
      :pagination.sync="pagination"
      hide-actions
      class="elevation-1"
      item-key="incident_number"
    >

</v-data-table>

 /* table row html in between */

<div class="text-xs-center pt-2">
      <v-pagination v-model="pagination.page" :length="pages" </v-pagination>
</div>

JS

I have a computed property that works out the page number just like in the example.

computed: {
      pages ()
      {
        if (this.pagination.rowsPerPage == null || this.pagination.totalItems == null)
        {
          return 0
        }

        return Math.ceil(this.pagination.totalItems / this.pagination.rowsPerPage)

      },
    }

Answer 1

Solved the issue. It would work when I enter something in the search bar so I noticed an event was being emitted by Vue. update:pagination within this there is a key value called totalItems and it was set to 0 on page load but when I enter something in the search bar it had a value after that.

On Page Load

To resolve the issue, when my backend returns the response with table data. I set the totalItems to the length of the number of entries in the table.

this.incidents = response.data['incidents']
this.pagination.totalItems = this.incidents.length

With Fix or Typing in Searchbar

Not sure if this is a bug or issue with the Vuetify v-data-table or not.