Multiple paginate components in one view

[ooduor]

I tried putting 2 <paginate/> at the top and bottom of my listing and using the same shared variables but when I click page 2 on the top one and scroll to the bottom one, it will still be one page behind.

[lokyoung]

Hello @highPriestLOL , You should set the selected page by $refs. You can check the following code.

<template>
  <div>
    <paginate
      :page-count="20"
      :margin-pages="2"
      :page-range="4"
      :initial-page="0"
      :container-class="'pagination'"
      :click-handler="clickCallback"
      ref="paginate1"
    ></paginate>
    <paginate
      :page-count="20"
      :margin-pages="2"
      :page-range="4"
      :initial-page="0"
      :container-class="'pagination'"
      :click-handler="clickCallback"
      ref="paginate2"
    ></paginate>
  </div>
</template>

<script>
export default {
  methods: {
    clickCallback(page) {
      this.$refs.paginate1.selected = this.$refs.paginate2.selected = page - 1;
    }
  }
}
</script>

[ooduor]

Perfect. Works!