Active page doesn't change

[trandaison]

<paginate
              :page-count="pageCount"
              :click-handler="fetchUsers"
              :force-page="currentPage"
              :prev-text="'>'"
              :next-text="'<'"
              :container-class="'pagination'"
              :page-class="'page-item'">
</paginate>

when fetchUsers is done, pageCount and currentPage will be updated but the active page is still the first page, it should be currentPage.

Do I miss some thing?

[ojczeo]

Page count should be static and passed once on mounting component. If you using route depended initial page number and also modify externally current page you should use :force-page prop.

Page count shoud be calculated somehow in that way:

Math.ceil(users.totalCount/usersPerPageLimit)

[sreecodeslayer]

Just define the v-model for pagination. Please see : https://github.com/lokyoung/vuejs-paginate/issues/85

[ditorahard]

I have already used v-model but if I change the v-model with other method than using :click-handler method it didn't change the active page.

`<paginate v-if="isPaginationActive" :page-count="participantDetail.last_page" :click-handler="paginationClickParticipant" :prev-text="'Sebelumnya'" :next-text="'Selanjutnya'" :container-class="'pagination'" :page-class="'page-item'" :page-link-class="'page-link'" :prev-class="'page-item'" :prev-link-class="'page-link'" :next-class="'page-item'" :next-link-class="'page-link'" v-model="pageNumber[0]"

`

[ojczeo]

Do you operate over Array in pageNumber? In short arrays reactivity is tricky in Vue.js. You should proxy it with computed value and use for this Vue.set, for example:

import Vue from 'vue'
//...
computed: {
  pageNumber: {
    get() {
      return this.pageNumber[0]    
    },
    set(value) {
      Vue.set(this.pageNumber, 0, value);  
    }
  }
}
//...

Next you can set pageNumber as model.

[lokyoung]

@trandaison @ojczeo @sreecodeslayer @ditorahard Please try v2.1.0. Now it support no v-model binding. Any questions please reopen this issue. Thanks!