使用laravel-vue-pagination无法切换分页，页码未传入组合式API

表格数据可正常显示，但点击laravel-vue-pagination提供的页码时始终停留在第1页，核心问题是分页组件的页码未能正确传递到组合式API的getAccounts函数中。

问题代码分析 #

模板部分 #

原模板代码：

<table class="table table-striped table-bordered">
  <thead>
    <th>SN</th>
    <th>Account Type</th>
    <th>Name</th>
    <th>Shop Name</th>
    <th>Address</th>
    <th>contact No</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" />

问题点：@pagination-change-page触发时，组件传递的是单个页码数值，但getAccounts期望接收包含page和paginate的对象，参数格式不匹配导致页码无法传递。

脚本部分 #

原脚本代码：

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 };
  },
};

问题点：初始化调用getAccounts时，直接传入了ref对象paginates，而非其实际值paginates.value；同时分页组件触发事件时未携带paginate参数。

组合式API部分 #

原组合式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,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;

问题点：API请求URL拼接错误，page和paginate参数之间缺少&分隔符，导致后端无法正确解析参数；同时paginate未设置默认值，参数缺失时会引发错误。

修复步骤 #

1. 调整模板的分页事件处理 #

修改分页组件的事件绑定，用箭头函数将页码包装成getAccounts需要的对象格式，同时带上每页条数：

<Pagination :data="accounts" @pagination-change-page="(page) => getAccounts({ page, paginate: paginates })" />

2. 修正脚本中的初始化调用 #

初始化时传入ref对象的实际值，确保参数正确：

onMounted(() => {
  getAccounts({ page: 1, paginate: paginates.value });
});

3. 修复组合式API的请求URL和参数处理 #

• 修复URL参数拼接，添加&分隔符
• 给paginate设置默认值，增强代码鲁棒性

const getAccounts = async ({ page = 1, paginate = 10 }) => {
    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;
    }).catch((resErr) => {
        loading.value = false;
        accountError.value = resErr;
    })
}

内容的提问来源于stack exchange，提问作者Saugat