Laravel一对多关联返回数据控制台可见但Vue页面不渲染问题

云上老周

2026-10-6

问题原因

接口返回结构与前端取值逻辑不匹配：后端接口返回的JSON外层套了sessions字段，结构为{"sessions": [Session数据列表]}，但前端直接将response.data赋值给sessions变量，此时变量内没有你要遍历的列表数据。
分页逻辑不对应：后端查询用的是get()方法，返回的是普通集合数组，没有分页对象的data字段，前端模板遍历sessions.data自然取不到值。
初始值类型错误：data中sessions初始化为空对象，遍历非数组类型会导致渲染异常。

解决方案

方案1：不需要分页，直接展示全部数据

后端接口调整（可选，也可以只改前端适配）：

public function allWithPeriods()
{
    $sessions = Session::orderBy('end_date', 'desc')
        ->with('_periods')
        ->get();
    // 直接返回集合，不需要外层套sessions字段
    return $sessions;
}

前端修改：

// data里将sessions初始化为空数组
data() {
    return {
        url: document.head.querySelector('meta[name="url"]').content,
        sessions: [],
    }
},

<!-- 模板里直接遍历sessions，去掉.data -->
<tbody v-for="session in sessions" :key="session.id">

如果不修改后端返回结构，只需要把axios赋值逻辑改成this.sessions = response.data.sessions即可。

方案2：保留分页功能

后端接口调整为分页查询：

public function allWithPeriods()
{
    $sessions = Session::orderBy('end_date', 'desc')
        ->with('_periods')
        // 自定义每页条数
        ->paginate(10);
    return $sessions;
}