Vue.js-觀看數據更改

Question

我在我的應用程序中添加了Bootstrap Vue表，並希望在用戶使用內置分頁切換到另一個頁面時進行記錄。

https://bootstrap-vue.js.org/docs/components/table/

為此，我添加了一個@change ，它應該偵聽並記錄分頁的v模型currentPage 。 但是，它似乎在currentPage實際更新之前被調用。

如何正確收聽此更新？

這是我嘗試過的： https : //jsfiddle.net/eywraw8t/394424/

 new Vue({ el: "#app", data: { totalRows: 50, perPage: 10, currentPage: 1 }, methods: { pagination() { console.log(this.currentPage); }, } }) 

 <div id="app"> <div> <b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" @change="pagination" /> </div> </div> 

Answer 1

您可以觀看currentPage

new Vue({
  el: "#app",
  data: {
   totalRows: 50,
   perPage: 10,
   currentPage: 1
  },
  watch: {
    currentPage: function (newVal) {
       console.log('Change to page', newVal)
    }
  },
  methods: {
    setTo() {
     this.currentPage = 1;
     console.log(this.currentPage);
    }
  }
})

在此處查看演示