证实外部分页不显示页码

Question

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

      },
    }

Answer 1

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

页面加载

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

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

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

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