Solution to the problem of being unable to jump to another page when using laravel-Vue-pagination

Question

In a table, the data is being displayed, but when I click on the page number provided by Laravel Vue Pagination, it is showing me the same page number 1. Well, the main problem is that the page number is not passed into the function (Composable API).

Template form

<table class="table table-striped table-bordered">
    <thead>
      <th>SN</th>
      <th>Account Type</th>
      <th>Name</th>
      <th>Store name</th>
      <th>Address</th>
      <th>Contact number</th>
      <th>Email</th>
    </thead>
    <tbody>
      <tr v-for="(account, i) in accounts.data" :key="account.id">
        <td>{{ i }}</td>
        <td>{{ account.account_type }}</td>
        <td>{{ account.name }}</td>
        <td>{{ (account.shop_name)?account.shop_name: 'EMPTY'}}</td>
        <td>{{ account.address }}</td>
        <td>{{ account.contact_number }}</td>
        <td>{{ account.email }}</td>
      </tr>
    </tbody>
  </table>
  <Pagination :data="accounts" @pagination-change-page="getAccounts" />
</template>

The data from the Composable API is passed in:data, and the function (Composable) is also passed in @pagination-change-page.Script tag

import LaravelVuePagination from 'laravel-vue-pagination';

export default {
    components: {
        'Pagination': LaravelVuePagination
    },
  setup() {
    }
    const paginates = ref(10);
    const { accounts, loading, getAccounts } = accountDetails();//Composables API
    onMounted(() => {
      getAccounts({paginate:paginates});
    });

    return { accounts, loading, getAccounts };
  },
};

Composable API In this function, I receive two parameters, and here is where Pagination (@pagination-change-page) should throw the page number!

import { ref } from '@vue/reactivity';
import axios from 'axios';

const accountDetails = () => {
    const accounts = ref({});
    const loading = ref(true);
    const accountError = ref({});


    const getAccounts = async ({page=1,paginate}) => {
        await axios.get('api/account/getAccounts?page=' page 'paginate=' paginate, {
            headers: {
                Authorization: `Bearer ${localStorage.getItem('token')}`,
                Accept: 'application/json',
            }
        }).then((res) => {
            accounts.value = res.data;
            loading.value = false;
            console.log(accounts.value);
        }).catch((resErr) => {
            loading.value = false;
            accountError.value = resErr;
        })
    }
    return { accounts, loading, accountError, getAccounts }
}
export default accountDetails;

Answer 1

Successfully working with Composition API Vue3
Just remove the paginate parameter from getAccounts and don't pass paginates to the function.

Updated code </>

script

import LaravelVuePagination from 'laravel-vue-pagination';

export default {
    components: {
        'Pagination': LaravelVuePagination
    },
  setup() {
    }
   
    const { accounts, loading, getAccounts } = accountDetails();//Composables API    
    onMounted(() => {
      getAccounts();
    });

    return { accounts, loading,getAccounts };
  },
};

Composable API

import { ref } from '@vue/reactivity';
import axios from 'axios';

const accountDetails = () => {
    const accounts = ref({});
    const loading = ref(true);
    const accountError = ref({});


    const getAccounts = async (page=1) => {
        await axios.get('api/account/getAccounts?page='+page, {
            headers: {
                Authorization: `Bearer ${localStorage.getItem('token')}`,
                Accept: 'application/json',
            }
        }).then((res) => {
            accounts.value = res.data;
            loading.value = false;
            console.log(accounts.value);
        }).catch((resErr) => {
            loading.value = false;
            accountError.value = resErr;
        })
    }
    return { accounts, loading, accountError, getAccounts }
}
export default accountDetails;