web-dev-qa-db-fra.com

Vuetify - comment faire de la pagination?

Je veux utiliser la pagination du framework Vuetify pour VueJS .

Composant de pagination de Vuetify: 

<v-pagination
        v-model="pagination.page"
        :length="pagination.total / 5"
        :total-visible="pagination.visible"
></v-pagination>

Je veux exécuter une fonction lorsque l'utilisateur clique sur un bouton. Je veux obtenir le numéro de page, puis exécuter la fonction avec ce numéro de page en paramètre.

Code de getItems des méthodes: 

this.pagination.page = response.body.page
this.pagination.total = response.body.total
this.pagination.perPage = response.body.perPage

Données: 

data () {
  return {
    items: [],
    pagination: {
      page: 1,
      total: 0,
      perPage: 0,
      visible: 7
    }
  }
}

enter image description here

paginationvue.jsvuejs2vuetify.js
8
pirmax

consultez les documents sur la section des événements. J'ai trouvé l'événement d'entrée pour gérer la nouvelle page.

<v-pagination
  v-model="pagination.page"
  :length="pagination.pages"
  @input="next"
></v-pagination>

et ma prochaine méthode:

next (page) {
  api.getBillList(page)
    .then(response => {
      this.bills = response.data.content
      console.log(this.bills)
    })
    .catch(error => {
      console.log(error)
    })
}
11
HoLiC