使用Laravel Vue Pagination与Vue3实现分页时无法渲染链接

尝试基于laravel-vue-pagination实现动态分页表格，后端通过->paginate()返回分页数据，参数接收正常，但分页链接始终无法渲染，控制台无任何警告或报错，尝试Bootstrap4/5版本的分页组件结果一致。

相关代码及数据 #

父组件代码

const links = ref({})

const resp = await axios.get(`/api/listingApi/getRegister/${param_search.value["parameter"]}/${param_search.value["value"]}`)
registers.value = resp.data.data
links.value = resp.data.links

<nAsignedCalls :valor="registers" :links="links"/>  

API返回数据

{
  "links": {
    "first": "http://www.crm.local:8081/api/listingApi/getRegister/cp/18519?page=1",
    "last": "http://www.crm.local:8081/api/listingApi/getRegister/cp/18519?page=6",
    "next": "http://www.crm.local:8081/api/listingApi/getRegister/cp/18519?page=2",
    "prev": null
  },
  "meta": {
    "current_page": 1,
    "from": 1,
    "last_page": 6,
    "links": [
      {"url": null, "label": "« Previous", "active": false},
      {"url": "http://www.crm.local:8081/api/listingApi/getRegister/cp/18519?page=1", "label": "1", "active": true},
      {"url": "http://www.crm.local:8081/api/listingApi/getRegister/cp/18519?page=2", "label": "2", "active": false},
      {"url": "» Next", "label": "Next", "active": false}
    ],
    "path": "http://www.crm.local:8081/api/listingApi/getRegister/cp/18519",
    "per_page": 30,
    "to": 30,
    "total": 160
  },
  "data": [...]
}

Laravel API代码

return ListingResource::collection(Listing::where('cp', '=', $value)->paginate($pagination));

子组件代码

import { Bootstrap5Pagination } from 'laravel-vue-pagination';

export default {
  props: {
    links: {
      type: Object,
      required: true
    }
  },
  components: {
    Bootstrap5Pagination
  },
  methods: {
    getResults(page) {
      // 页码切换逻辑
    }
  }
}

<Bootstrap5Pagination
  :data="links"
  @pagination-change-page="getResults"
/>

解决方案 #

1. 修正传递给分页组件的数据结构

laravel-vue-pagination需要接收完整的分页响应对象（包含meta、data、links顶级字段），而非单独的resp.data.links。修改父组件代码：

const paginationData = ref({})

const resp = await axios.get(`/api/listingApi/getRegister/${param_search.value["parameter"]}/${param_search.value["value"]}`)
registers.value = resp.data.data
paginationData.value = resp.data // 保存完整分页响应

<nAsignedCalls :valor="registers" :pagination-data="paginationData"/>  

2. 调整子组件的Props与组件绑定

子组件改为接收完整分页数据，并绑定到分页组件的:data属性：

import { Bootstrap5Pagination } from 'laravel-vue-pagination';

export default {
  props: {
    paginationData: {
      type: Object,
      required: true
    }
  },
  components: {
    Bootstrap5Pagination
  },
  methods: {
    getResults(page) {
      // 此处实现页码切换后的API调用逻辑
    }
  }
}

<Bootstrap5Pagination
  :data="paginationData"
  @pagination-change-page="getResults"
/>

3. 核心原因说明

你之前传递的resp.data.links仅包含first/last/next/prev跳转链接，而组件需要读取meta.links中的页码按钮集合、meta.current_page当前页、meta.last_page总页数等元数据，才能正确渲染分页控件。传递完整的响应对象后，组件可以自动解析这些必要字段。

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