Vue3+Laravel+Bootstrap使用laravel-vue-pagination分页异常排查

初始问题 #

尝试通过laravel-vue-pagination实现分页功能，但分页链接无法显示。API返回结果包含links和meta字段，后端与前端配置如下：

后端API控制器代码 #

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

Vue配置与组件代码 #

在app.js中全局注册组件：

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

在应用实例中引入组件：

const app4 = createApp({
    components:{
        nAsignedCalls,
        Bootstrap4Pagination
    }
})
app4.mount('#app4')

子组件内使用分页组件：

<Bootstrap4Pagination :data="valor" @pagination-change-page="getResults" />

<script setup>
    import { defineProps } from 'vue';
    
    const props = defineProps({
        valor: {
            type: Object,
            required: true
        },
    });
    
    const getResults = async (page = 1) => {
        const response = await fetch(`/api/listingApi/getRegister?page=${page}`);
        props.valor = await response.json();
    }

    getResults();
</script>

控制台报错信息 #

1. JSON解析错误：

VM2625:1 Uncaught (in promise) SyntaxError: Unexpected token '<', "<link rel="... is not valid JSON

2. 组件解析失败：

Failed to resolve component: Bootstrap4Pagination
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <NAsignedCalls valor= (15) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] > 
  at <FormTelemarketing> 
  at <App>

更新1：消除基础错误但分页仍不显示 #

调整代码后控制台无报错，但分页组件仍无法显示。修改后的代码如下：

父组件传递数据 #

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"/>  

子组件代码 #

<template>
    <div>
        <table>
            <!-- 表格内容 -->
        </table>
        <Bootstrap5Pagination :data="links" @pagination-change-page="getResults" />
    </div>
</template>
  
<script setup>
    import { defineProps } from 'vue';
    import { Bootstrap5Pagination } from 'laravel-vue-pagination';
    
    const props = defineProps({
        valor: {
            type: Object,
            required: true
        },
        links: {
            type: Object,
            required: true
        }
    });
    
    const getResults = async (page = 1) => {
        const response = await fetch(`/api/listingApi/getRegister?page=${page}`);
        props.valor = await JSON.parse(JSON.stringify(response));
    }

    getResults();
</script>

更新2：数据加载成功但分页切换失效，出现警告 #

修改后端代码后数据成功加载，默认显示10条，但分页按钮点击后无法切换分页，控制台出现属性传递警告。

修改后的后端代码 #

$pagination = $request->get('pagination');

$pagination = ($pagination != "") ? $pagination : 10;

if($parameter == 'address'){
    return ListingResource::collection(Listing::where('address', '=', $value)->simplePaginate($pagination));
}else if($parameter == 'city'){
    return ListingResource::collection(Listing::where('city', '=', $value)->simplePaginate($pagination));
}else if($parameter == 'cp'){
    return ListingResource::collection(Listing::where('cp', '=', $value)->paginate($pagination));
}

修改后的子组件代码 #

<script setup>
const props = defineProps({
    valor: {
        type: Object,
        required: true
    },
    data:{
        links: {
            type: Array,
            required: true
        }
    }
});
</script>

<template>
<div class="row justify-content-end">
    pagination
    <Bootstrap4Pagination :data="links" @pagination-change-page="getResults" />
</div>
</template>

控制台警告信息 #

traneous non-props attributes (links) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. 
  at <NAsignedCalls valor= (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] 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=16', prev: null, next: 'http://www.crm.local:8081/api/listingApi/getRegister/cp/18519?page=2'} > 
  at <FormTelemarketing> 
  at <App>

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