Vue.js调用Laravel API渲染员工表格无数据，单索引取值正常排查

你的核心问题是API响应数据的结构和赋值方式不匹配，导致v-for遍历的不是预期的员工数组。

问题根源 #

根据你提到的EmployeeInfo[0].id能获取到值，说明API返回的数据结构应该是类似这样的：

{
  "EmployeeInfo": [
    {"id": 1, "firstname": "xxx", "lastname": "xxx"},
    // 其他员工数据
  ]
}

但你在代码里直接把整个响应对象赋值给了EmployeeInfos：

this.EmployeeInfos = response.data;

这就导致EmployeeInfos是一个包含EmployeeInfo数组的对象，而非数组本身。此时v-for="EmployeeInfo in EmployeeInfos"遍历的是这个对象的属性，不是员工数组的元素，自然拿不到正确的id、firstname等值。

修复方案 #

修改赋值语句，将响应中的员工数组赋值给EmployeeInfos：

this.EmployeeInfos = response.data.EmployeeInfo;

额外优化建议 #

• 循环变量名建议用单数（比如employee），避免和数组属性名混淆，提升代码可读性：

<tr v-for="employee in EmployeeInfos" :key="employee.id">
    <td>{{ employee.id }}</td>
    <td>{{ employee.firstname }}</td>
    <td>{{ employee.lastname }}</td>
</tr>

• 可以在赋值前打印response.data确认结构，避免后续再出现结构不匹配的问题：

.then(response => {
    console.log(response.data); // 查看API返回的具体结构
    this.EmployeeInfos = response.data.EmployeeInfo;
});

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