I added a Bootstrap Vue Table to my app and wanted to log when the user switches to another page using the built in pagination.
https://bootstrap-vue.js.org/docs/components/table/
For this, I added a @change
that is supposed to listen and log the v-model of the pagination, currentPage
. However, it seems to be called before currentPage
is actually updated.
How can I properly listen to this updating?
This is what I have tried: 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>
You can watch 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);
}
}
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.