Vuetify - comment faire de la pagination?

Je veux utiliser la pagination de Vuetify cadre pour VueJS.

La Pagination de la composante 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 la page en paramètre.

Code de getItems de méthodes:

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

De données:

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

Vuetify - comment faire de la pagination?

InformationsquelleAutor pirmax | 2017-11-23
  1. 4

    la caisse de la docs sur la section événements. J'ai trouvé l'entrée de l'événement de la poignée de nouvelle page.

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

    et ma méthode suivante:

    next (page) {
  api.getBillList(page)
    .then(response => {
      this.bills = response.data.content
      console.log(this.bills)
    })
    .catch(error => {
      console.log(error)
    })
}
    • comment avez-vous calculé votre :length pour la pagination? J'ai suivi les vuetify docs et par l'exemple, mais il ne fonctionne pas pour moi. Posté une question ici
    • J'obtiens une valeur de longueur depuis le backend (api point de terminaison rest)
    InformationsquelleAutor HoLiC
  2. 4

    COMMENTAIRE:

    Avant de mettre en œuvre la pagination, essayez de voir si vous en avez vraiment besoin, en premier lieu, ou vous pouvez utiliser les 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/

    RÉPONSE:

    Vous pouvez réagir sur pagination.page changement avec watcher depuis pagination.page changements sur le bouton de la souris, puis exécuter votre method.

    watch: {
    "pagination.page": (newPage) => {
        this.onPageChange(newPage);
    }
}

    Ou de réagir sur la composante input événement:

    <v-pagination
    @input="onPageChange"
></v-pagination>
    InformationsquelleAutor Traxo