How to target each page of the pagination for adding an event in Vuejs?

Question

< script >
  export default {
    data() {
      return {
        perPage: 3,
        currentPage: 1,
        items: [{
            id: 1,
            first_name: 'Fred',
            last_name: 'Flintstone'
          },
          {
            id: 2,
            first_name: 'Wilma',
            last_name: 'Flintstone'
          },
          {
            id: 3,
            first_name: 'Barney',
            last_name: 'Rubble'
          },
          {
            id: 4,
            first_name: 'Betty',
            last_name: 'Rubble'
          },
          {
            id: 5,
            first_name: 'Pebbles',
            last_name: 'Flintstone'
          },
          {
            id: 6,
            first_name: 'Bamm Bamm',
            last_name: 'Rubble'
          },
          {
            id: 7,
            first_name: 'The Great',
            last_name: 'Gazzoo'
          },
          {
            id: 8,
            first_name: 'Rockhead',
            last_name: 'Slate'
          },
          {
            id: 9,
            first_name: 'Pearl',
            last_name: 'Slaghoople'
          }
        ]
      }
    },
    computed: {
      rows() {
        return this.items.length
      }
    }
  } <
  /script>

<template>
  <div class="overflow-auto">
    <b-pagination
      v-model="currentPage"
      :total-rows="rows"
      :per-page="perPage"
    ></b-pagination>

    <p class="mt-3">Current Page: {{ currentPage }}</p>

    <b-table
      :items="items"
      :per-page="perPage"
      :current-page="currentPage"
    ></b-table>
  </div>
</template>

I have choosen bootstrap-vue pagination, and here is the working example https://bootstrap-vue.org/docs/components/pagination

How to target each page of the pagination for adding an event in Vuejs? I mean generally to call some events/ Api call for each page.

Not sure how to target particular page number and call an event.

Answer 1

If i understand your problematic correctly, you want the pagination component to trigger an event each time the page is changed, right?

To do that, you might want to listen for the "page-click" event returned by the pagination component each time a page is changed. It returns the page number and the according event. Whenever the event is triggered, you can call a method which handles what you want basically.

If that doesn't work for you and you need more specific usage, you could create a wrapper component for the pagination to emit the events you want for you usage. Though bare in mind that this solution will be harder to maintain and that it is preferred to use the events of the library when you use one.

Here is a very simple example on how to use the page-click event, like any other event emitted by a component in vue :

<template>
 <b-pagination @page-click="handleClick(event, pageNumber)"></b-pagination>
</template>
<script>
export default {
  data() {
  },
methods: {
  handleClick(event, pageNumber) {
// your handling logic here
  }
 }
}
</script>

Also, the documentation you sent talks about the event in the "Preventing a page from being selected" section. This git discussion might also help : https://github.com/bootstrap-vue/bootstrap-vue/issues/302

Answer 2

This approach has worked for me,

 <template>  
     <div>   
        <b-pagination
         @input="handlePageClick"
         v-model="page"
         :per-page="per_page"
         :total-rows="total_rows"
      ></b-pagination>  </div> 
  </template>




<script> 
     export default 
     {
       data(){}, 
       methods: {  
         handlePageClick(pageNumber){
           alert(pageNumber)
              }  
         } 
       }
 </script>