Laravel9+Inertia+Vue3环境下Vue组件无法获取侧边栏数据

以下是分步排查和解决方法：

1. 确认控制器数据传递是否正确 #

控制器中返回Inertia响应时，必须确保sidebar数据被正确注入到页面props中：

// 示例控制器代码
public function index()
{
    $sidebar = Category::with('subcategories')->get()->toArray(); // 转换为可序列化数组
    return Inertia::render('Admin/Dashboard', [
        'sidebar' => $sidebar, // 键名必须和Vue组件props的名称完全一致
    ]);
}

如果侧边栏是全局布局组件，需要用Inertia::share全局共享数据：

// 在AppServiceProvider的boot方法中
Inertia::share('sidebar', function () {
    return Category::with('subcategories')->get()->toArray();
});

2. 检查Vue组件的props定义 #

在Resources/js/Pages/Admin/Shared/Sidebar.vue中，必须正确定义props类型和默认值：

<script setup>
import { watch, onMounted } from 'vue';

// 定义props，匹配控制器传递的数据类型
const props = defineProps({
    sidebar: {
        type: Array, // 多层级菜单用Array，单层级用Object
        required: true,
        default: () => []
    }
});

// 注意：数据是异步加载的，初始化时可能为空，用watch监听或onMounted打印
watch(() => props.sidebar, (newSidebar) => {
    console.log('侧边栏数据:', newSidebar);
}, { immediate: true });

onMounted(() => {
    console.log('挂载时的侧边栏数据:', props.sidebar);
});
</script>

3. 确保组件调用时正确传递props #

• 如果Sidebar是页面子组件：在父页面组件（比如Admin/Dashboard.vue）中必须显式传递props：

<template>
    <div class="admin-layout">
        <Sidebar :sidebar="sidebar" />
        <!-- 页面内容 -->
    </div>
</template>

<script setup>
import Sidebar from './Shared/Sidebar.vue';

// 接收控制器传递的sidebar数据
const props = defineProps({
    sidebar: Array
});
</script>

• 如果Sidebar是布局组件的一部分：在布局组件中接收全局共享的sidebar props，再传递给Sidebar：

<!-- Admin/Layout.vue -->
<template>
    <Sidebar :sidebar="sidebar" />
    <main>
        <slot />
    </main>
</template>

<script setup>
import Sidebar from './Shared/Sidebar.vue';

const props = defineProps({
    sidebar: Array
});
</script>

然后在页面组件中指定布局：

<!-- Admin/Dashboard.vue -->
<script setup>
import Layout from './Layout.vue';

defineOptions({
    layout: Layout
});
</script>

4. 验证Inertia响应数据 #

打开浏览器开发者工具，切换到Network标签，找到Inertia的XHR请求，查看响应中的props字段，确认sidebar数据是否存在且结构正确。如果响应中没有sidebar，说明控制器传递有误；如果存在但Vue中拿不到，检查props名称是否完全匹配（大小写敏感）。

5. 排查数据序列化问题 #

确保Eloquent模型数据被正确序列化，避免传递未转换的模型实例。使用->toArray()或->get()返回集合（集合会自动序列化），不要直接传递模型对象。

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