Vuetify外部分页不显示页码 [英] Vuetify external pagination not displaying page numbers

问题描述

我有一个 v-data-table，我正在尝试为其添加分页.我已经按照示例文档

为了解决这个问题，当我的后端返回带有表格数据的响应时.我将 totalItems 设置为表中条目数的长度.

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

在搜索栏中进行修复或键入

不确定这是否是 Vuetify v-data-table 的错误或问题.

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)

      },
    }

解决方案

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.

这篇关于Vuetify外部分页不显示页码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！