Laravel Breeze Inertia-Vue页面无法调用Eloquent关联的问题

Inertia 本身不存在不支持 Eloquent 关联的问题，本质差异是：

• Blade 是 PHP 运行环境下的服务端渲染，拿到的是原生 Eloquent 对象，可以直接用->访问属性、触发懒加载关联
• Inertia 会把返回的 Eloquent 模型自动序列化为 JSON 格式传递给前端 Vue，前端拿到的是普通 JavaScript 对象，既没有 PHP 运行环境，也不存在 Eloquent 对象实例，自然无法使用 PHP 的->访问语法，也不能触发 Eloquent 的懒加载逻辑。

• 第一步：后端查询数据时预加载关联
  不要依赖懒加载，查询数据时用with()方法提前加载需要的关联，避免N+1问题的同时，保证关联数据会被一起序列化传给前端：

  <?php
  // 文章控制器示例
  namespace App\Http\Controllers;
  
  use App\Models\Post;
  use Inertia\Inertia;
  
  class PostController extends Controller
  {
      public function index()
      {
          // 预加载posts关联的user数据
          $posts = Post::with('user')->latest()->paginate(10);
          
          return Inertia::render('Post/Index', [
              'posts' => $posts
          ]);
      }
  }
  

  如果你使用了 Eloquent API Resource 做数据转换，需要在资源类里显式定义要返回的关联字段，关联数据不会自动带出：

  <?php
  namespace App\Http\Resources;
  
  use Illuminate\Http\Resources\Json\JsonResource;
  
  class PostResource extends JsonResource
  {
      public function toArray($request)
      {
          return [
              'id' => $this->id,
              'title' => $this->title,
              'content' => $this->content,
              // 显式返回关联的作者信息
              'user' => [
                  'id' => $this->user->id,
                  'name' => $this->user->name,
              ],
              'created_at' => $this->created_at->diffForHumans(),
          ];
      }
  }
  

• 第二步：前端Vue中用JS对象语法访问关联数据
  前端接收到的props是普通JS对象，嵌套结构和你在PHP中访问的Eloquent结构完全一致，只需要把->换成JS的点操作符即可访问：

  <script setup>
  // 定义接收的props
  defineProps({
      posts: {
          type: Array,
          required: true
      }
  })
  </script>
  
  <template>
      <div class="post-list">
          <div v-for="post in posts" :key="post.id" class="post-item">
              <h2>{{ post.title }}</h2>
              <!-- 直接访问嵌套的关联作者名称，等价于Blade里的$post->user->name -->
              <p class="author">发布人：{{ post.user?.name || '匿名用户' }}</p>
              <div class="content">{{ post.content }}</div>
          </div>
      </div>
  </template>
  

• 检查模型的$hidden属性，确保关联外键（比如posts表的user_id）、关联对应字段没有被加入隐藏列表，否则序列化时会丢失关联数据
• 如果访问时出现空值报错，是因为部分文章没有关联的作者数据，和Blade里遇到的空关联问题一致，用上面示例里的可选链+默认值处理即可
• 所有关联的加载、数据处理逻辑都在后端PHP层完成，前端只负责消费已经序列化好的结构化数据，不要试图在前端调用Eloquent的相关方法。

不需要退回Blade版本，整个关联的使用逻辑和服务端渲染没有本质差异，只是数据访问语法根据JS运行环境做对应调整即可，完全可以保留SPA的无刷新渲染体验。

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