javascript - 当某些对象有字段而有些对象没有时，如何避免出现 "TypeError: Cannot read property ' weekday_text' of undefined"错误？

Question

我通过向 google places API 发出 GET 请求来获取景点信息。不幸的是，有些景点有一个 opening_hours 对象字段，它本身有 weekday_text 和 open_now 字段，但有些景点没有，所以我得到了错误

<p v-if='sight.opening_hours && sight.opening_hours.open_now'>Open now</p>
<p v-if='sight.opening_hours && !sight.opening_hours.open_now'>Closed now</p>
<p v-if='sight.opening_hours && sight.opening_hours.weekday_text' v-for='day in this.sight.opening_hours.weekday_text'>{{ day }}</p>

我的 v-ifs 是否没有涵盖 sight.opening_hours 和 sight.opening_hours.weekday_text 不存在的情况？我认为错误来自 v-for，因为如果我删除它，一切正常。

Answer 1

https://v2.vuejs.org/v2/guide/conditional.html#v-if-with-v-for不推荐 v-if 和 v-for 一起使用

<div v-if='sight.opening_hours && sight.opening_hours.weekday_text'>
  <p v-for='day in this.sight.opening_hours.weekday_text'>{{ day }}</p>
</div>

或者如果你不需要打印 div 那么你可以使用 template

<template v-if="sight.opening_hours && sight.opening_hours.weekday_text">
  <p v-for='day in this.sight.opening_hours.weekday_text'>{{ day }}</p>
</template>