Laravel API数据无法在Vue.js 3 SPA中正常渲染问题排查

我正在使用Laravel后端与Vue.js 3单页应用开发项目，Laravel API运行正常，但前端无法正常渲染数据。浏览器控制台可正常打印员工数组，但Vue DevTools中EmployeeList数组为空，页面无法展示数据。请问问题出在哪里？模型关联是否会对此造成影响？

EmployeeList.vue 代码 #

<template>
    <div class="container">
        <div class="table table-hover">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">First Name</th>
                    <th scope="col">Last Name</th>
                    <th scope="col">Birth Date</th>
                    <th scope="col">Gender</th>
                    <th scope="col">Hire Date</th>
                </tr>
            </thead>

            <tbody v-for="employee in employees" :key="employee.emp_no">
                <tr class="table-secondary">
                    <th scope="row">{{ employee.emp_no }}</th>
                    <th scope="row">{{ employee.first_name }}</th>
                    <th scope="row">{{ employee.last_name }}</th>
                    <th scope="row">{{ employee.birth_date }}</th>
                    <th scope="row">{{ employee.gender }}</th>
                    <th scope="row">{{ employee.hire_date }}</th>
                </tr>
            </tbody>
        </div>
    </div>
</template>

<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.employees;
                    console.log(this.employees);
                }).catch(error => {
                    console.log(error);
                });
            }
        },
        mounted() {
            console.log('Employee List Component Mounted');
        }
    }
</script>

Laravel 模型关联代码 #

Employee.php #

class Employee extends Model
{
    use HasFactory;
    public $timestamps = false;

    protected $fillable = ['birth_date','first_name','last_name','gender','hire_date'];

    protected $primaryKey = 'emp_no';

    public function titles(): HasMany
    {
        return $this->hasMany(Title::class, 'emp_no','emp_no');
    }

    public function salaries(): HasMany
    {
        return $this->hasMany(Salary::class, 'emp_no','emp_no');
    }
}

Salary.php #

class Salary extends Model
{
    use HasFactory;
    protected $fillable = ['salary','from_date','to_date'];

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

Title.php #

class Title extends Model
{
    use HasFactory;
    public $timestamps = false;

    protected $fillable = ['title','from_date','to_date'];

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

核心问题：Vue响应式数据初始化错误 #

你在Vue组件的data选项里把employees初始化为Array（构造函数），而非空数组[]。Vue的响应式系统依赖正确的数据类型初始化，当你将employees设为构造函数时，后续赋值数组不会触发Vue的响应式更新，导致DevTools显示为空，页面无法渲染数据。

修复步骤 #

修改data中的初始化代码：

data() {
    return {
        employees: [] // 改为空数组
    }
}

模型关联的影响说明 #

当前的模型关联不会导致前端渲染问题。只要API正确返回employees数组（控制台已确认），关联关系本身不影响前端数据接收。除非API返回的嵌套关联数据存在循环引用，但你当前前端仅用到Employee的基础字段，因此这不是问题根源。

额外优化建议 #

• 避免async/await与.then()混用，统一写法更清晰：

async getEmployees() {
    try {
        const url = 'http://127.0.0.1:8000/api/employees';
        const response = await axios.get(url);
        this.employees = response.data.employees;
        console.log(this.employees);
    } catch (error) {
        console.log(error);
    }
}

• 将<tbody>上的v-for移至<tr>标签，符合表格语义：

<tbody>
    <tr v-for="employee in employees" :key="employee.emp_no" class="table-secondary">
        <!-- 表格内容 -->
    </tr>
</tbody>

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