Laravel 10 API关联数据无法在Vue.js 3前端展示的问题

问题背景 #

使用Laravel 10构建API，Vue.js 3开发前端页面。Employee模型与Title、Salary模型为一对多关联。当控制器通过关联查询（with('titles','salaries')）返回员工数据时，Vue组件EmployeeList.vue页面无内容显示，但浏览器控制台能看到包含关联数据的员工数组；若控制器返回不带关联的结构化数据（包含employees键），页面则可正常展示。需要实现前端展示包含所有关联模型的数据。

问题根源 #

两种控制器返回的JSON格式不一致：

• 可正常展示的控制器返回的是包含employees键的对象，Vue代码中通过response.data.employees获取数据；
• 带关联查询的控制器直接返回员工数组，此时response.data就是数组本身，response.data.employees不存在，导致this.employees未被正确赋值，页面无法渲染。

解决方案 #

提供两种可行方案，任选其一即可：

方案一：修改Laravel控制器，统一返回格式 #

调整带关联查询的控制器代码，将关联查询结果放入employees键中，保持与正常返回的格式一致：

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Employee;
use App\Models\Title;
use App\Models\Salary;

class EmployeeController extends Controller
{
    public function employees(){
        $employees = Employee::with('titles','salaries')->get();
        return response()->json([
            'employees' => $employees,
            'message' => 'Employees with relations',
            'code' => 200
        ], 200);
    }
}

方案二：修改Vue组件代码，适配API返回格式 #

调整Vue组件中获取数据的逻辑，直接将response.data赋值给employees：

<script>
    import axios from 'axios';
    export default {
        name:'EmployeeList',
        data() {
            return {
                employees: [] // 建议初始化为空数组，而非Array构造函数
            }
        },
        created() {
            this.getEmployees();
        },
        methods:{
            async getEmployees() {
                let url = 'http://127.0.0.1:8000/api/employees';
                await axios.get(url).then(response => {
                    this.employees = response.data; // 直接取response.data
                    console.log(this.employees);
                }).catch(error => {
                    console.log(error)
                });
            }
        },
        mounted() {
            console.log('Employee List Component Mounted');
        }
    }
</script>

注意：Vue的data中建议将employees初始化为空数组[]，而非Array构造函数，避免潜在的类型问题。

额外优化（可选） #

如果需要在前端展示关联数据（如员工的头衔、薪资），可以在Vue模板中遍历关联字段，示例如下：

<tbody v-for="employee in employees" :key="employee.emp_no">
    <tr class="table-secondary">
        <th scope="row">{{ employee.emp_no }}</th>
        <td>{{ employee.first_name }}</td>
        <td>{{ employee.last_name }}</td>
        <td>{{ employee.birth_date }}</td>
        <td>{{ employee.gender }}</td>
        <td>{{ employee.hire_date }}</td>
    </tr>
    <!-- 展示员工的头衔 -->
    <tr v-for="title in employee.titles" :key="title.id">
        <td colspan="6">
            <strong>头衔:</strong> {{ title.title }} ({{ title.from_date }} ~ {{ title.to_date }})
        </td>
    </tr>
    <!-- 展示员工的薪资 -->
    <tr v-for="salary in employee.salaries" :key="salary.id">
        <td colspan="6">
            <strong>薪资:</strong> {{ salary.salary }} ({{ salary.from_date }} ~ {{ salary.to_date }})
        </td>
    </tr>
</tbody>

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