Vuejs/Vuetify, data table server side on django rest framework, pagination isssue

Question

i'm working a django api application that with such output :

{
    "count": 8025,
    "next": "http://localhost:8000/api/v1/businessunits/?page=2",
    "previous": null,
    "results": []
    }

My get method back is quite simple using :

rest_framework.pagination import PageNumberPagination

Been trying to implement the already paginated data into v-data-table-server went that way to reduce latentaty cause of the bulk of the data i had to sent a paginated response.

js api call :

data() {
      return {
        loading: false,
        currentPage: 1,
        search: "",
        totalBusinessUnits: 0,
        options: {},
        sortBy: [],
        businessUnits: [],
        selectedColumn: null,
        headers: []....        

watch: {
          options: {
            handler(options) {
              this.getBusinessUnits();
            },
            deep:false
          },
        },
  

 getBusinessUnits() {
        this.loading = true;
        const { currentPage } = this.options;
        let pageNumber = currentPage - 1;
        const url = `${base_url}${bu_urls.get_all}?page=${this.currentPage}`;
        console.log(currentPage, pageNumber)
        axios
          .get(url, header)
          .then(response => {
            this.loading = false;
            this.businessUnits = response.data.results;
            this.totalBusinessUnits = response.data.count;
            console.log(this.options)
          })
          .catch((error) => {
            console.error("Error fetching business units:", error);
          });
      },




 created() {
      this.getBusinessUnits(); // Execute the getBusinessUnits method on component creation
    },
  
    mounted() {
      document.title = "Business Units";
      this.getBusinessUnits()
    },

on each call to the next page the options will change and move to the next page but the data being renderend is still the same data from the privious call.

Answer 1

changing the this.currentPage to this.options.page so let url = ${base_url}${bu_urls.get_all}?page=${this.options.page}&page_size=${itemsPerPage}