lokyoung/vuejs-paginate

Programmatic navigation

Fleeck opened this issue · 7 comments

Fleeck commented

Hi, probably there's no option to click on page programmatically. Could you please provide such method?
Thanks for your work and looking forward to your reply.

Fleeck commented

For now I am using such dirty hack as this.$refs._data.selected = page. Would be nice to provide some method for this.

lokyoung commented

@Fleeck Thank you very much. I will check it.

lokyoung commented

https://vuejs.org/v2/guide/components.html#Child-Component-Refs
By following this guide. You can directly access to the selected props.

example

<template>
  <paginate
    :pageCount="20"
    ref="paginate"
  ></paginate>
</template>

<script>
export default {
  mounted() {
    // you can change the prop after mounted
    this.$refs.paginate.selected = 10
  }
}
</script>
  • 👍7
  • 🎉5
Fleeck commented

@lokyoung thanks for the tip, didn't know that. Pretty new with Vue.

lokyoung commented

@Fleeck Thanks for your feedback. I will close this issue. Any questions just reopen it.

faizansaiyed commented

I've come to this situation and kept two paginate, one on top of the page and another at the bottom. When I change the page from the top, it reflects properly in the bottom paginate. But when I change the page from the bottom, it does not reflect on top paginate.

lokyoung commented

Hi @Fleeck @fsaiyedOB @ronjouch . You can simply use v-model to programmatically change the selected page now. Document is here https://github.com/lokyoung/vuejs-paginate#value-binding . This functionality has been published in v2.0.0. Thanks.

  • 🎉1