以编程方式更改Bootstrap Vue分页

Question

有没有办法以编程方式更改Bootstrap-Vue中的b-pagination，就像这样：

this.$refs.pagination.goToPage(3) // This is just example

或者使用类似这样的分页插件：

this.$bvPagination.goToPage('pagination', 3) // This is just example too

我正在尝试寻找 bootstrap-vue 分页插件 的文档，但是我还没有找到。我以为会有像 模态框插件 中的 $bvModal 一样的东西，比如 $bvPagination。

使用 v-model 对我来说没有起作用，页面仍然停留在第一页。

<b-pagination
   v-model="pagination.currentPage"
   :total-rows="pagination.totalItems"
   first-number
   last-number
   :per-page="pagination.selectedAmount"
/>

在mounted方法中：

mounted() {
  this.pagination.currentPage = this.$store.state.app.lastPage
}

在观察中：

watch: {
  'pagination.currentPage': function (page) {
    this.$store.commit('app/UPDATE_LAST_PAGE', page)
  },
},

- novilfahlevy

Answer 1

你可以在 b-pagination 中添加 @input。

<b-pagination
   v-model="pagination.currentPage"
   :total-rows="pagination.totalItems"
   first-number
   last-number
   :per-page="pagination.selectedAmount"
   @input="redirectPage"
/>

redirectPage(){
   this.$router.push({path: `/page/${this.currentPage}` });
 }

input事件会在值被修改后每次触发。

因此，如果你只是以编程方式更改currentPage的值，它应该可以正常工作。

this.currentPage = 3 //this should redirect you since the 
                     //currentPage is changed and redirectPage will be triggered.

这种方法基本上可以通过UI和编程实现，这意味着如果用户点击分页，重定向将触发，否则，如果您更改了this.currentPage，则会起作用。

- Romil Lodaya