javascript - Vue.js - Watch data changes - Stack Overflow

admin管理员组

文章数量:1293888

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.

/

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: /

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>

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/docs/ponents/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/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>

• javascript
• vue.js
• bootstrap-vue

Share Improve this question Follow edited Sep 26, 2018 at 8:29 Rence asked Sep 26, 2018 at 6:41 RenceRence 2,95033 gold badges2626 silver badges4444 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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

Check demo here

本文标签： javascriptVuejsWatch data changesStack Overflow