vue.js - 以编程方式更改 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 分页插件 的文档，但我还没有找到。我被认为有类似 $bvPagination 的东西，因为 modal plugin 中有 $bvModal。

使用 v-model 对我不起作用，该页面仍在第 1 页。

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

在安装方法中:

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

在 watch 中:

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

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 它将起作用。