如何将含多层关联的Laravel模型传递给Vue.js组件并保留关联数据

问题原因 #

Laravel 模型序列化为 JSON 时，默认不会自动加载未提前触发的关联数据，你直接传递$offer->comments时，Comment 模型对应的 employee 关联还未加载，最终序列化结果自然只保留外键employee_id，没有关联数据。

解决方案 #

方案1：查询时预加载关联（推荐）

在控制器查询$offer时就嵌套预加载关联，性能最优，不会产生N+1查询问题：

// 控制器中查询offer的代码修改为
$offer = Offer::with('comments.employee')->find($offerId);

修改后 Blade 代码不需要调整，原写法即可正常输出带employee关联的评论数据。

方案2：Blade输出时手动加载关联

如果不方便修改控制器的查询逻辑，可以直接在Blade模板中临时加载关联：

<comment-component :comments="{{ $offer->comments->load('employee') }}"></comment-component>

方案3：模型全局绑定自动加载关联

如果所有场景输出Comment时都需要携带employee关联，可以直接在Comment模型中设置默认自动加载的关联：

// app/Models/Comment.php
class Comment extends Model
{
    // 定义默认自动加载的关联
    protected $with = ['employee'];

    public function employee()
    {
        return $this->belongsTo(Employee::class);
    }
}

注意：该方案会导致所有Comment查询默认关联employee表，不需要关联的场景会产生多余查询，按需使用。

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