vue Cannot read property 'XXX' of undefined"

Question

duty.StartTime,duty.EndTime都可以拿到数据，到了duty.dutyTime.Days这一层就会报错 Cannot read property 'Days' of undefined"，并且页面数据渲染失败。

打印数据如下图

报错代码如下

<div class="dutyTiming" v-for="(duty,index) in flyer.jWorkStages" :key="index">
    <div class="flight">
        <div class="flightTitle">
        <div>飞行值勤期</div>
        <div class="titleStartTime">{{duty.StartTime | getFDate}}</div>
        <div>至</div>
        <div class="titleEndTime">{{duty.EndTime | getFDate}}</div>
        <div>总飞行时间：{{duty.dutyTime}}</div>
        <div>总值勤时间：{{duty.dutyTime.Days}}</div>
    </div>
</div>

如果注掉这一段

<div>总值勤时间：{{duty.dutyTime.Days}}</div>

页面渲染出来的数据是

为社么再取一层就报错呢？而且我后续代码有类似结构就不报错,如下

<div class="flightTask" v-for="(flight,index) in duty.jWorks" :key="index">
    <div>至当前值勤时间：{{flight.dutyHour.Hours}}小时</div>
</div>

Answer 1

有的数据可能没有dutyTime，你可以判断一下再渲染

Answer 2

<div>总值勤时间：{{duty.dutyTime ? duty.dutyTime.Days : '这里没有duty.dutyTime'}}</div>
换成这个你就能看到哪一条数据缺了duty.dutyTime了