Получение начальной загрузки для игры с REST API - PullRequest
Новая
       6

Получение начальной загрузки для игры с REST API

0 голосов
/ 02 февраля 2019

Попытка заставить Bootstrap Vue играть с API REST, который возвращает данные для одной страницы и общее количество записей (на основе this ): 

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

Это Vue работаетесли я принесу всю таблицу.Однако когда я использую API REST для возврата по одной странице за раз, количество страниц считается равным 1, а прямые и конечные ссылки неактивны.Таким образом, я не могу инициировать запрос, например, на страницу 2.

API REST правильно возвращает общее количество строк в таблице и количество запрошенных строк, но Bootstrap Vue, кажется, не наблюдает/ реагировать на изменения в this.totalRows.

Что я пропустил?

Ответы [ 2 ]

0 голосов
/ 02 мая 2019

Вы также можете отключить локальную нумерацию страниц в таблице, чтобы ваш поставщик товаров стал отвечать за управление нумерацией страниц.

0 голосов
/ 02 февраля 2019

Вам необходимо установить per-page prop в 0 на b-table компоненте, чтобы отключить локальную нумерацию страниц и позволить b-pagination обрабатывать данные.Вот пример: 

new Vue({
  el: '#app',
  data() {
    return {
      items: [],
      fields: [{
          key: 'postId',
          label: 'Post ID'
        },
        {
          key: 'id',
          label: 'ID'
        },
        {
          key: 'name',
          label: 'Name'
        },
        {
          key: 'email',
          label: 'Email'
        },
        {
          key: 'body',
          label: 'Body'
        }
      ],
      currentPage: 0,
      perPage: 10,
      totalItems: 0
    }
  },
  mounted() {
    this.fetchData().catch(error => {
      console.error(error)
    })
  },
  methods: {
    async fetchData() {
      this.items = await fetch(`https://jsonplaceholder.typicode.com/comments?_page=${this.currentPage}&_limit=${this.perPage}`)
        .then(res => {
          this.totalItems = parseInt(res.headers.get('x-total-count'), 10)

          return res.json()
        })
        .then(items => items)
    }
  },
  watch: {
    currentPage: {
      handler: function(value) {
        this.fetchData().catch(error => {
          console.error(error)
        })
      }
    }
  }
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.js"></script>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-table show-empty :items="items" :fields="fields" :current-page="currentPage" :per-page="0"></b-table>
  <b-pagination size="md" :total-rows="totalItems" v-model="currentPage" :per-page="perPage"></b-pagination>
</div>
...