Vue.js - следите за изменениями данных

Я добавил в свое приложение таблицу 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>


javascript vue.js bootstrap-vue
person Sirence    schedule 26.09.2018    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Вы можете смотреть 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);
    }
  }
})

Проверить демо здесь

person ittus    schedule 26.09.2018
comment
Спасибо, это именно то, что я искал. Вы случайно не знаете, лучше ли использовать console.log(newVal) или просто использовать console.log(this.currentPage) в функции с точки зрения производительности? jsfiddle.net/Sirence/pt3jmbzh/3 - person Sirence; 26.09.2018
comment
Я думаю, что оба способа сработают. Я предпочитаю console.log(newVal) - person ittus; 26.09.2018