Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 772
pirmax Avatar asked Nov 23 '17 14:11

pirmax


People also ask

How do you Paginate in Vuetify?

The v-pagination component is used to separate long sets of data so that it is easier for a user to consume information. Depending on the length provided, the pagination component will automatically scale. To maintain the current page, simply supply a v-model attribute.

Is Vuetify easy to learn?

Unlike other frameworks, Vuetify is designed from the ground up to be easy to learn and rewarding to master with hundreds of carefully crafted components from the Material Design specification .

Is Vuetify responsive?

With the VuetifyJs grid system, you can create very powerful responsive layouts without any line of JavaScript code.

What is Vuetify?

Vuetify is a Vue UI Library with beautifully handcrafted Material Components. No design skills required — everything you need to create amazing applications is at your fingertips. Get Started.


1 Answers

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)
    })
}
like image 167
HoLiC Avatar answered Sep 28 '22 21:09

HoLiC