Vue.js

Question

我在我的应用程序中添加了一个 Bootstrap Vue Table 并希望在用户使用内置分页切换到另一个页面时进行记录。

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);
    }
  }
})

Check demo here

Vue.js - 观察数据变化

Vue.js - Watch data changes

javascript

bootstrap-vue