Laravel与Vue.js分页实现：解决分页无法显示的问题

下面针对你代码里的核心问题逐一修正：

1. Vue组件接收分页数据的类型错误 #

你的Index.vue里把news的props类型定义成了Array，但Laravel返回的paginate()结果是LengthAwarePaginator对象，包含数据、分页链接、总条数等完整分页信息。如果定义成Array，Inertia会自动把它转成纯数据数组，直接丢失news.links这类分页属性。

修正Index.vue代码： #

<template>  
  <Pagination :links="news.links"/>
</template>
<script>
import Pagination from '@/Components/Pagination.vue';

export default {
    components: { Pagination }, // 必须注册组件才能使用
    props: {
        news: {
            type: Object, // 改成Object匹配分页对象类型
            required: true,
        },
    }
}    
</script>

注：把import语句移到<script>标签内，这是Vue组件的正确写法。

2. 分页组件的链接与渲染错误 #

你的分页组件存在3个关键逻辑错误：

• 跳转地址绑错：href应该绑定link.url，而不是link.label（label是"1""下一页"这类显示文字）
• 样式类未加引号：text-gray-500会被Vue当成变量解析，需要用引号包裹成字符串
• 循环缺少唯一key：Vue要求v-for必须绑定唯一key，避免渲染警告
• 未渲染分页文字：组件内没有输出link.label，导致页面看不到分页按钮内容

修正分页组件代码： #

<template>
  <div class="flex gap-2 mt-4">
    <component 
      :is="link.url ? 'Link' : 'span'"
      v-for="link in links"
      :key="link.label" // 添加唯一key
      :href="link.url" // 修正跳转地址绑定
      :class="link.url ? 'px-3 py-1 border rounded hover:bg-gray-100' : 'px-3 py-1 text-gray-500'"
    >
      {{ link.label }} <!-- 渲染页码/分页文字 -->
    </component>
  </div>
</template>

<script>
import { Link } from '@inertiajs/vue3'; // 导入Inertia的Link组件（Vue2版本请对应调整导入路径）

export default {
  components: { Link },
  props: {
    links: {
      type: Array,
      required: true,
    },
  },
}
</script>

3. Controller数据处理优化（可选） #

你用each处理数据的写法可以换成transform，更简洁且不破坏分页对象结构：

public function index()
{
    $news = News::latest()
        ->with('user', 'media')
        ->paginate(2)
        ->transform(function ($news) {
            $news->image = $news->media->first()?->getUrl();
            $news->unsetRelation('media');
            return $news;
        });
    
    return inertia('News/Index', [
        'news' => $news,
    ]);
}

验证步骤 #

1. 打开浏览器开发者工具的Network面板，查看请求返回的news数据，确认包含links数组
2. 用Vue DevTools查看Index.vue的props，确认news是包含data、links、total等属性的完整对象
3. 检查分页组件是否接收到links数组，页面上是否渲染出页码按钮

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