Vue集成Laravel分页异常：仅能获取第一页数据问题求助

API 探路者

2026-7-29

Laravel分页异常排查：点击第二页始终请求第一页数据

问题现象

点击分页组件第2页按钮时，请求参数始终为page=1，仅能获取第一页数据
第2页按钮会短暂高亮，但很快恢复第一页按钮为激活状态

问题根源分析

Props单向数据流被破坏：分页组件中直接修改了props传递的pagination.current_page，Vue的单向数据流机制会在父组件更新状态时覆盖这个修改，导致高亮状态回退。
分页参数未正确传递：父组件的分页请求方法未接收分页组件传递的目标页码，始终使用初始的page=1发起请求。

修复步骤

1. 修正分页组件的`changePage`方法

移除直接修改props的代码，仅负责传递目标页码：

changePage: function(page)
{
    // 边界值处理
    if (page < 1) {
        page = 1;
    }
    if (page > this.pagination.last_page)
    {
        page = this.pagination.last_page;
    }
    // 移除直接修改props的代码
    // this.pagination.current_page = page;
    this.$emit('paginate', page);
}

2. 父组件接收并使用传递的页码

更新分页请求方法，接收分页组件传递的page参数并更新当前页：

async onGetPostsAndCategoriesPaginated(page)
{
    this.loader = 0;
    
    try 
    {
       // 先更新当前页参数
       this.page = page;
       console.log('pagination', this.pagination);
       this.loader = 1;
        let params = { page: this.page, paginate: this.paginate };
        let response = await axios.get('/api/posts/get-posts-and-categories', { params: params });
        this.loader = 2;
        console.log(response.data.posts);
        this.posts = response.data.data.data;
        this.handlePagination(response.data.pagination);
        console.log(this.posts);
    } 
    catch (error) 
    {
        this.loader = 3;
        throw error;
    }
}