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

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