试图让Bootstrap Vue使用REST api,该api返回一页的数据和记录总数(基于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就行了.然而,当我使用REST api一次返回一个页面时,页面数被计算为1,并且前向和结束链接处于非活动状态.因此,我无法触发请求,例如第2页.

REST api正确返回表中的总行数和请求的行数,但Bootstrap Vue似乎没有监视/响应对此的更改.全行.

我错过了什么?

推荐答案

您需要将b-table组件上的per-page属性设置为0,以禁用本地分页,并允许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>

Vue.js相关问答推荐

在VueJS中卸载元素之前是否应该删除JavaScript事件收件箱?

无法解析组件:google—pay—button

如何将 cogo toast PRIVE集成到nuxt3中?

Vuetify/Vue3 插槽模板之间的阴影

VueI18n 无法读取或更改组合 API 中的区域设置

vuejs:在确认提示之前更改 HTML

我需要在 nuxt2 上使用 /index 作为 url 的一部分

vue3 + pinia:如何从?store 中获取一个值

vue router/:param 斜杠的参数

如何使用 vue.js 获取本地 html 文件?

在 vue 3 中使用 vue-chartjs:createElement 不是函数

为什么组件在 v-if 下没有被销毁

如何创建 vuetify 工具栏链接下拉菜单?

如何在 .js 文件中使用 Vue i18n 翻译?

更新 v-for 中使用的数组内的对象时,Vue js react性问题

使用 VueJS 在 v-for 中转换

是否可以在 vue-devtools 中命名 Vue 实例?

在 Vue.js 中,为什么我们必须在导入组件后导出它们?

如何在 Vuetify DataTable 组件中设置初始每页行数值?

使用 svelte js 的原因