CODEWITHSUNDEEP
paginationvue.jsvuejs2vuetify.js
pirmax
pirmax

Reputation: 2153

Vuetify - how to make pagination?

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

enter image description here

Upvotes: 14

Views: 48922

Answers (4)

Asir Hameem
Asir Hameem

Reputation: 21

Recently, I was working with vuetify pagination. Vuetify provides many default functions which are very helpful, but first need to understand what is those functions are doing.

I only used @update:model-value="handlePageChange" for page change. This function actually handles both nextPage change and prevPage change. Vuetify also have @next and @prev which handles next page change and previous page change

<v-pagination prev-icon="mdi-chevron-left-circle-outline"
            next-icon="mdi-chevron-right-circle-outline" v-model="current_page"
            :length="total_pages"
            :total-visible="total_pages < 3 ? 3 : 7"
            @update:model-value="handlePageChange"></v-pagination>

Upvotes: 2

Traxo
Traxo

Reputation: 19002

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>

Upvotes: 5

Matthew Zackschewski
Matthew Zackschewski

Reputation: 486

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>

Upvotes: 3

HoLiC
HoLiC

Reputation: 466

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

Upvotes: 23

Related Questions