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

问题描述

我有一个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)

      },
    }

推荐答案

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

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.

页面加载

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

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

在搜索栏中输入修正或键入

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

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

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