web-dev-qa-db-fra.com

Obtenir bootstrap vue pagination à jouer avec REST API

Essayer d'obtenir Bootstrap Vue pour jouer avec une API REST qui renvoie des données sur une page et le nombre total d'enregistrements (basé sur Ceci ):

<template>
  </div>
    <b-pagination 
      v-on:change="onPageChange" 
      :total-rows="totalRows" 
      :per-page="perPage" 
      v-model="currentPage"  />
    <b-table responsive striped hover show-empty
      stacked="md"
      :items="items"
      :fields="fields"
      :current-page="currentPage"
      :per-page="perPage"
      :filter="filter"
      :sort-by.sync="sortBy"
      :sort-desc.sync="sortDesc"
      :sort-direction="sortDirection"
      @filtered="onFiltered">
    </b-table>
  </div>
</template>
<script>
...
export default {
  name: 'TableList',
  data() {
    return {
      module: null,
      title: 'Table',
      items: [],
      fields: [],
      errors: [],
      currentPage: 1,
      perPage: 15,
      totalRows: 0,
      pageOptions: [ 5, 10, 15 ],
      sortBy: null,
      sortDesc: false,
      sortDirection: 'asc',
      filter: null,
    }
  },
  created() {
    ...
    this.fetch();
  },
  methods: {
    fetch() {
      var me = this;
      var requestParams = {
        page: this.currentPage,
        per_page: this.perPage
      };
      if(this.sortBy) {
        requestParams = Object.assign({ sort_by: this.sortBy }, requestParams);
      }
      Rest('GET', '/table/' + this.table, requestParams, this.$root.user.token)
      .then(response => {
        me.items = response.data[1]
        me.totalRows = response.data[0].total_entries
      })
      .catch(error => {
        this.errors.Push('Error: ' + error.response.status + ': ' + error.response.statusText)
      })
      .finally(() => {
        //alert('turn off loader!');
      });
    }
  }
</script>

Ceci fonctionne Vue si j'agine la table entière. Cependant, lorsque j'utilise l'API REST pour renvoyer une page à la fois, le nombre de pages est calculé pour être 1, et les liens avant et finissent sont inactifs. Ainsi, je suis incapable de déclencher une demande d'ex. page 2.

L'API REST renvoie correctement le nombre total de lignes dans la table et le nombre de lignes demandées, mais Bootstrap Vue n'apparaît pas regarder/réagir à des modifications à ceci.TalRows .

Qu'est-ce que j'ai manqué?

vue.jsbootstrap-4bootstrap-vue
13
minisaurus

Vous pouvez également désactiver la pagination locale dans la table afin que votre fournisseur d'articles devienne responsable du contrôle de la pagination.

1
Troy Morehouse