Vuetify外部分页不显示页码

Posted 2023-02-22

【中文标题】Vuetify外部分页不显示页码

【英文标题】：Vuetify external pagination not displaying page numbers

【发布时间】：2019-01-30 01:19:39

【问题描述】：

我有一个 v-data-table，我正在尝试为其添加分页。我遵循了示例文档here 我看不出我做错了什么。创建我的组件时，它会调用我的后端来填充项目列表。然后将其传递给数据表。

我还有一个搜索栏，如果我在其中输入任何内容，就会弹出页码。

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

我有一个计算属性，可以像示例中一样计算出页码。

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

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

      ,
    

【参考方案1】：

解决了这个问题。当我在搜索栏中输入内容时它会起作用，所以我注意到 Vue 正在发出一个事件。 update:pagination 在其中有一个名为 totalItems 的键值，它在页面加载时设置为 0 但是当我在搜索栏中输入内容时，它之后有一个值。

页面加载时

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

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

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

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