Laravel+Vue+Tailwind分页组件无法获取数据问题求助

核心问题分析 #

你遇到的问题主要出在分页数据的结构访问和组件属性/事件绑定两个方面：Laravel分页对象通过Inertia传递到前端后，实际数据、分页属性的命名规则和结构和你当前的写法不匹配，导致数据无法渲染、分页切换失效。

步骤1：修正分页属性的命名（蛇形 vs 驼峰） #

Laravel返回的分页对象属性是蛇形命名（如current_page、per_page），而非你代码中使用的驼峰命名，这会导致分页组件无法正确识别当前页、每页条数等参数。

步骤2：正确访问分页数据 #

Laravel分页对象的实际数据存储在data属性中，而非直接遍历整个分页对象，这是你用paginate(5)时看不到数据的核心原因。

步骤3：简化分页事件绑定 #

page-changed事件会直接传递页码参数，无需额外用箭头函数包裹，避免参数传递异常。

修改后的完整代码 #

控制器代码（保持不变）

$departments = Department::select('name')->paginate(5);
return Inertia::render('Departments/Index',['departments' => $departments]);

视图代码

<script setup>
import { useForm } from '@inertiajs/vue3';
import { Inertia } from '@inertiajs/inertia';

const props = defineProps({
  departments: { 
    type: Object, 
    required: true 
  }
});

const form = useForm({ id:'', name:'' });

// 分页切换逻辑：用Inertia.visit直接跳转，自动更新组件props
const onPageClick = (page) => {
  Inertia.visit(route('departments.index', { page }));
};
</script>

<template>
  <!-- 渲染数据时必须遍历departments.data -->
  <div v-for="dept in departments.data" :key="dept.id">
    {{ dept.name }}
  </div>

  <!-- 修正后的分页组件 -->
  <VueTailwindPagination
    :current="departments.current_page"
    :total="departments.total"
    :per-page="departments.per_page"
    @page-changed="onPageClick"
  ></VueTailwindPagination>
</template>

额外验证点 #

1. 打开浏览器控制台，查看props.departments的结构，确认包含data、current_page、total、per_page等属性。
2. 点击分页按钮时，检查网络请求是否携带了page参数，控制器是否正确返回对应页码的数据。

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