Laravel 9 + Vue 3分页实现故障求助：组件无法正常显示

问题概述 #

1. 初次实现分页时，控制台抛出组件未解析错误：

Failed to resolve component: pagination
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

2. 调整组件注册方式后，错误消失，但分页组件完全不显示。

相关代码与数据 #

分页组件代码 #

<script setup>
import { Link }  from '@inertiajs/inertia-vue3';

defineProps({
    data: {
        type: Object,
        default: () => ({}),
    },
});
</script>

<template>
    <div v-if="data.links.length > 3" class="flex justify-center mt-4 space-x-4">
        <Link
            v-for="(link, k) in data.links"
            :key="k"
            class="px-4 py-3 text-sm leading-4
            bg-white rounded hover:bg-white
            focus:text-indigo-500 hover:shadow"
            :class="{'bg-indigo-400 text-white': link.active}"
            :href="link.url"
            v-html="link.label"
        />
    </div>
</template>

控制台返回的分页数据结构 #

{
  "data": [
    {
      "id": 10000,
      "id_date": 0,
      "id_commercial": 35,
      "numerical_serie": 0,
      "co_owner": 0,
      "simplify": 0,
      // ...其他字段
    }
  ],
  "links": {
    "first": "http://www.crm.local:8081/api/preContractApi?page=1",
    // ...其他链接属性
  },
  "meta": {
    "current_page": 1,
    "from": 1,
    "last_page": 100,
    // ...其他元数据
  }
}

问题分析与解决方案 #

1. 组件未解析错误 #

该错误因组件未正确注册导致，Vue无法识别<pagination>标签，解决方式二选一：

• 全局注册：在app.js中导入分页组件并全局注册

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
import Pagination from './Components/Pagination.vue' // 替换为组件实际路径

createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, App, props, plugin }) {
    return createApp({ render: () => h(App, props) })
      .use(plugin)
      .component('Pagination', Pagination)
      .mount(el)
  },
})

• 局部注册：在使用分页组件的页面/组件中局部引入

<script setup>
import Pagination from './Components/Pagination.vue'
// ...其他业务代码
</script>

<template>
  <!-- ...页面其他内容 -->
  <Pagination :data="preContracts" />
</template>

2. 分页组件不显示 #

核心问题是数据结构不匹配：

• 当前传递给组件的是preContracts.links（对象类型），但组件期望接收包含分页链接数组的完整分页响应对象
• 组件模板中v-if="data.links.length > 3"判断数组长度，但实际data.links是对象，length属性不存在，导致v-if条件不成立，组件被隐藏

修复步骤：

1. 修正组件传参：将<pagination :data="preContracts.links" />改为<Pagination :data="preContracts" />，传递完整的分页响应对象
2. 调整组件模板逻辑：根据后端返回的实际数据结构修改组件。如果后端返回的分页链接数组在meta.links中，修改组件如下：

<script setup>
import { Link }  from '@inertiajs/inertia-vue3';

defineProps({
    data: {
        type: Object,
        default: () => ({}),
    },
});
</script>

<template>
    <div v-if="data.meta?.links?.length > 3" class="flex justify-center mt-4 space-x-4">
        <Link
            v-for="(link, k) in data.meta.links"
            :key="k"
            class="px-4 py-3 text-sm leading-4
            bg-white rounded hover:bg-white
            focus:text-indigo-500 hover:shadow"
            :class="{'bg-indigo-400 text-white': link.active}"
            :href="link.url"
            v-html="link.label"
        />
    </div>
</template>

3. 后端返回正确分页结构：如果后端未返回分页链接数组，调整Laravel代码直接返回分页实例响应：

// 控制器中
$preContracts = PreContract::paginate(15);
return Inertia::render('PreContracts/Index', ['preContracts' => $preContracts]);

此方式Laravel会自动返回包含links数组的标准分页结构，组件无需修改模板即可正常渲染。

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