0
0 Comments

I am trying to set manually the 

current-page
of the table. the value of the 
current-page
will be coming from what is set in the URL 
(eg. http://localhost:8000/list?page=2)

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

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

    <b-table
      id="my-table"
      :items="getList"
      :fields="fields"
      :per-page="perPage"
      :current-page="currentPage"
      small
    ></b-table>
  </div>
</template>


data() {
    return {
      fields: [
        //fields
      ],
      currentPage: 2, // I tried setting default value for debugging
      totalRows: 2,
      perPage: 5,
    }
}
methods: {
    getBookings(ctx) {
        console.log(ctx.current-page) // this will print a value of 1 on the console even if I set it to 2
        
        //axios call 
        totalRows = response.data.count
        return response.data.results
    }
}

I am not sure why is it resetting to 1 even if I manually set it to 2 for the initial loading. Is there any way I can execute this? I’m not sure what I am missing on this, I’m checking the documentation https://bootstrap-vue.org/docs/components/pagination.

Anonymous Asked question May 14, 2021