Laravel Inertia中如何让API Resource数据无需嵌套data直接访问？

方法一：直接提取Resource集合的data数据 #

在返回Inertia视图时，直接获取API Resource集合的data属性，传递给Vue的就会是纯数组：

$projects = ProjectResource::collection(Project::get())->data;

return Inertia::render('Project/Edit', compact('projects'));

或者用resolve()方法解构取出data：

$projects = ProjectResource::collection(Project::get())->resolve()['data'];

return Inertia::render('Project/Edit', compact('projects'));

方法二：自定义集合资源类 #

创建专门的集合资源类，重写toArray方法避免嵌套data结构：

1. 创建ProjectCollection资源文件：

// app/Http/Resources/ProjectCollection.php
namespace App\Http\Resources;

use Illuminate\Http\Resources\Json\ResourceCollection;

class ProjectCollection extends ResourceCollection
{
    public function toArray($request)
    {
        // 直接返回集合数据，不包裹在data字段中
        return $this->collection;
    }
}

2. 在控制器中使用该集合类：

use App\Http\Resources\ProjectCollection;

$projects = new ProjectCollection(Project::get());

return Inertia::render('Project/Edit', compact('projects'));

方法三：Vue端通过计算属性适配（备选） #

如果不想修改后端代码，可在Vue组件内用计算属性映射数据：

<script setup>
import { computed } from 'vue';

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

// 直接用projectList替代projects.data
const projectList = computed(() => props.projects.data);
</script>

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