Vue.js 获取引导vue分页以使用REST api

尝试让引导Vue使用REST api播放，该api返回一页的数据和记录总数（基于）：

...
导出默认值{
名称：'表格列表'，
数据（）{
返回{
模块：空，
标题：“表格”，
项目：[]，
字段：[]，
错误：[]，
当前页面：1，
每页：15，
总计行数：0，
页面选项：[5,10,15]，
sortBy:null，
sortDesc:错误，
sortDirection:'asc'，
筛选器：null，
}
},
创建（）{
...
this.fetch（）；
},
方法：{
fetch（）{
var me=这个；
var requestParams={
page:this.currentPage，
每页：this.perPage
};
如果（这个很糟糕）{
requestParams=Object.assign（{sort_by:this.sortBy}，requestParams）；
}
Rest（'GET'，'/table/'+this.table，requestParams，this.root.user.token）
。然后（响应=>{
me.items=response.data[1]
me.totalRows=response.data[0]。总计\u个条目
})
.catch（错误=>{
this.errors.push（'Error:'+Error.response.status+'：'+Error.response.statusText）
})
.最后（（）=>{
//警报（“关闭装载机！”）；
});
}
}

如果我获取整个表，则此Vue可以工作。但是，当我使用REST api一次返回一页时，页数计算为1，并且前向和结束链接处于非活动状态。因此，我无法触发对例如第2页的请求

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

---

我遗漏了什么？

您需要在

b-table

组件上将每页

属性设置为0，以禁用本地分页并允许
b-pagination
处理数据。以下是一个示例：


newvue({
el:“#应用程序”，
数据（）{
返回{
项目：[]，
字段：[{
键：“posted”，
标签：“帖子ID”
},
{
键：“id”，
标签：“ID”
},
{
关键字：“名称”，
标签：“名称”
},
{
关键字：“电子邮件”，
标签：“电子邮件”
},
{
关键词：“身体”，
标签：“身体”
}
],
当前页面：0，
每页：10，
总计项目：0
}
},
安装的（）{
this.fetchData（）.catch（错误=>{
控制台错误（错误）
})
},
方法：{
异步获取数据（）{
this.items=等待获取(`https://jsonplaceholder.typicode.com/comments?_page=${this.currentPage}&_limit=${this.perPage}`）
。然后（res=>{
this.totalItems=parseInt（res.headers.get（'x-total-count'），10）
return res.json（）
})
。然后（项目=>项目）
}
},
观察：{
当前页面：{
处理程序：函数（值）{
this.fetchData（）.catch（错误=>{
控制台错误（错误）
})
}
}
}
})

您还可以在表中禁用本地分页，以便您的项目提供商负责控制分页。
谢谢@DigitalDriver；要使其正常工作，我还必须删除@filtered=“onFiltered”-我稍后会研究：）我们可以从表中删除
：每页
吗？
currentPage
应该从1开始。
<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>