Vuetify - how to make pagination? - pagination

Question

I want to use pagination from Vuetify framework for VueJS.
Pagination component from Vuetify:
<v-pagination
v-model="pagination.page"
:length="pagination.total / 5"
:total-visible="pagination.visible"
></v-pagination>
I want to execute a function when the user clicks on a button. I want to get the page number and then execute the function with this page number in parameter.
Code from getItems from methods:
this.pagination.page = response.body.page
this.pagination.total = response.body.total
this.pagination.perPage = response.body.perPage
Data:
data () {
return {
items: [],
pagination: {
page: 1,
total: 0,
perPage: 0,
visible: 7
}
}
}

Answer 1

checkout the docs on the events section. I found the input event to handle new page.
<v-pagination
v-model="pagination.page"
:length="pagination.pages"
#input="next"
></v-pagination>
and my next method:
next (page) {
api.getBillList(page)
.then(response => {
this.bills = response.data.content
console.log(this.bills)
})
.catch(error => {
console.log(error)
})
}

Answer 2

COMMENT:
Before you implement pagination, try to see if you really need it in the first place, or you can use alternatives:
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/
**ANSWER:**
You can react on pagination.page change with watcher since pagination.page changes on button click, and then execute your method.
watch: {
"pagination.page": (newPage) => {
this.onPageChange(newPage);
}
}
Or react on component's input event:
<v-pagination
#input="onPageChange"
></v-pagination>

Answer 3

I arrived here after searching for an error I received trying to implement this pagination in my VueJS project: [Vue warn]: Invalid prop: custom validator check failed for prop "length"..
My problem, and it looks like a problem you may have in your question's example code, was my calculation of length was arriving at a decimal answer. For example, if I had 23 records and a page size of 5, it would return 4.6, giving me the error above. I had to wrap my calculation in a Math.ceil() to arrive at the appropriate value for length.
Hope this helps someone :)
<v-pagination
v-model="currPage"
:length="Math.ceil(arr.length / pageSize)"
:total-visible="6"
></v-pagination>