访问嵌套对象属性报错：TypeError: u.employee_function is null

核心原因 #

这是异步数据加载与Vue渲染时机不匹配导致的：
组件首次渲染时，API返回的employee.daily_schedules数据还未完全加载，此时部分schedule.employee_function是null；当直接渲染schedule.employee_function时，Vue会处理null值（显示为空），但尝试访问null的name属性时，JavaScript会直接抛出TypeError。后续API数据加载完成后，虽然employee_function变成了完整对象，但首次渲染的错误已经触发。

解决方案 #

1. 使用可选链操作符（最简洁）

Vue 3直接支持ES6+可选链语法；Vue 2需安装@vue/composition-api或配置Babel插件支持。修改插值部分：

<th data-toggle="tooltip" data-placement="bottom" v-for="schedule in employee.daily_schedules">
  {{schedule.start}}-{{schedule.end}}-{{schedule.employee_function?.name}}
</th>

可选链?.会在employee_function为null/undefined时终止访问，返回undefined，避免报错。

2. 添加条件判断

通过v-if提前过滤或用三元表达式处理空值：

• 方式一：给<th>加判断，确保有数据再渲染：

<th 
  data-toggle="tooltip" 
  data-placement="bottom" 
  v-for="schedule in employee.daily_schedules"
  v-if="schedule.employee_function"
>
  {{schedule.start}}-{{schedule.end}}-{{schedule.employee_function.name}}
</th>

• 方式二：在插值中用三元表达式兜底：

<th data-toggle="tooltip" data-placement="bottom" v-for="schedule in employee.daily_schedules">
  {{schedule.start}}-{{schedule.end}}-{{schedule.employee_function ? schedule.employee_function.name : ''}}
</th>

3. 初始化默认值

在获取API数据后，给每个schedule的employee_function设置默认空对象，避免渲染时出现null：

// 假设这是你获取API数据的代码
axios.get('/your-api-url').then(res => {
  this.employee = res.data;
  // 给daily_schedules中的每个schedule初始化employee_function
  this.employee.daily_schedules = this.employee.daily_schedules.map(schedule => ({
    ...schedule,
    employee_function: schedule.employee_function || {}
  }));
});

内容的提问来源于stack exchange，提问作者Miquel Ángel