如何使用b-pagination api？

Question

​

layoutchange() {

  this.layout = !this.layout;

  if (this.layout === true) {

    this.perPage = this.layout ? 8 : 12;
    this.listProducts();
  } else {

    this.perPage = !this.layout ? 12 : 8;
    this.gridProducts();
  }
},

<a class="list-icon" v-bind:class="{ active: layout == true }" v-on:click="layoutchange"></a>
<a class="grid-icon" v-bind:class="{ active: layout == false }" v-on:click="layoutchange"></a>

<ul v-if="layout == true">
  //code for product display
  <b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage"></b-pagination>
</ul>

<ul v-if="layout == false">
  //code for product display
  <b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage"></b-pagination>
  </ul

​

基本上，我尝试为每个页面添加api调用，(我有一个需要调用的api )假设如果我点击页面1，我需要触发api，而相同的页面2需要调用api。现在我有一个疑问，现在我正在使用b-pagination (bootstrap-vue)，是否有任何事件可以调用每个页面？例如下一个、上一个或任何基于事件的事件。因此，使用相同的名称，我可以使用该名称调用api。

我使用fr网格和列表视图，因为我都有分页。

参考文档https://bootstrap-vue.org/docs/components/pagination

Answer 1

如果在特定用例中，b-pagination没有提供您可以使用的事件，那么您可以只关注currentPage属性。

https://vuejs.org/v2/guide/computed.html#Watchers

export default {
  data() {
    return {
      currentPage: null,
    }
  },
  watch: {
    currentPage(newVal) {
      if(newVal) {
        // Call the api
        // Random api endpoint as example
        const endpoint = 'https://jsonplaceholder.typicode.com/todos/'
        
        fetch(endpoint + newVal).then((res) => {
          console.log(res)
          // update corresponding data
        })
      }
    }
  },
  mounted() {
    // Initialise currentPage to your route or 1 by default as example 
    this.currentPage = 1
  }
}