Vuetify - 如何进行分页？

Question

我想为 VueJS 使用 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
    }
  }
}

原文由 pirmax 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

查看事件部分的文档。我找到了处理新页面的输入事件。

 <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)
    })
}

原文由 HoLiC 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

评论：

在你实现分页之前，首先尝试看看你是否真的需要它，或者你可以使用替代方案：

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 在按钮单击时发生变化，然后执行您的 method 。

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

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

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

原文由 Traxo 发布，翻译遵循 CC BY-SA 4.0 许可协议