Vuetify - 如何制作分页？

Question

我想使用来自 VueJy 的 Vuetify 框架的分页。

来自Vuetify的分页组件：

<v-pagination
        v-model="pagination.page"
        :length="pagination.total / 5"
        :total-visible="pagination.visible"
></v-pagination>

我想在用户点击按钮时执行一个功能。我想获取页码，然后在参数中使用此页码执行该函数。

来自方法的getItems的代码：

this.pagination.page = response.body.page
this.pagination.total = response.body.total
this.pagination.perPage = response.body.perPage

数据：

data () {
  return {
    items: [],
    pagination: {
      page: 1,
      total: 0,
      perPage: 0,
      visible: 7
    }
  }
}

Answer 1

<强> COMMENT：
在实施分页之前，首先尝试查看是否真的需要它，或者您可以使用替代方法：
https://slack.engineering/evolving-api-pagination-at-slack-1c1f644f8e12
https://dzone.com/articles/why-most-programmers-get-pagination-wrong
http://allyouneedisbackend.com/blog/2017/09/24/the-sql-i-love-part-1-scanning-large-table/
https://www.xarg.org/2011/10/optimized-pagination-using-mysql/
https://www.eversql.com/faster-pagination-in-mysql-why-order-by-with-limit-and-offset-is-slow/

<小时/> 的解答：

自点击按钮后pagination.page更改后，您可以pagination.page更改watcher，然后执行method。

watch: {
    "pagination.page": (newPage) => {
        this.onPageChange(newPage);
    }
}

或对组件的input事件做出反应：

<v-pagination
    @input="onPageChange"
></v-pagination>

Answer 2

结帐活动部分的文档。我发现输入事件处理新页面。

<v-pagination
  v-model="pagination.page"
  :length="pagination.pages"
  @input="next"
></v-pagination>

和我的下一个方法：

next (page) {
  api.getBillList(page)
    .then(response => {
      this.bills = response.data.content
      console.log(this.bills)
    })
    .catch(error => {
      console.log(error)
    })
}

Answer 3

我在搜索尝试在我的 VueJS 项目中实现此分页时收到的错误后到达这里：[Vue warn]: Invalid prop: custom validator check failed for prop "length".。

我的问题，看起来您在问题示例代码中可能遇到的问题是，我对长度的计算得出了十进制答案。例如，如果我有 23 条记录且页面大小为 5，它将返回 4.6，从而出现上述错误。我必须将我的计算包装在 Math.ceil() 中才能得出合适的长度值。

希望这对某人有所帮助:)

<v-pagination
   v-model="currPage"
   :length="Math.ceil(arr.length / pageSize)"
   :total-visible="6"
></v-pagination>