vue.js 访问嵌套对象属性

92dk7w1h  于 2022-11-30  发布在  Vue.js
关注(0)|答案(2)|浏览(789)

我正在尝试访问嵌套对象属性。

<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.name
(类型错误:u.雇员函数为空)
但是如果我呈现schedule.employee_function,我就有了整个对象:

这是我从api得到的对象:

vzgqcmou

vzgqcmou1#

v-for和数据结构而言,schedule.employee_function.name应该足够了。

3zwtqj6y

3zwtqj6y2#

由于Employees数组中的数据可能包含employee_function中的空值(例如,employee_function对象包含空值而不是对象),因此可能会导致类型错误,即您尝试读取空对象。
解决这个问题最简单的方法是在引用对象的属性前面添加一个?。例如employee_function?.name。这意味着如果employee_function为空,它将不会读取任何连接到代码的属性。

相关问题