Как избежать ошибки «TypeError: Невозможно прочитать свойство« weekday_text »из undefined», когда некоторые объекты имеют поле, а некоторые нет?

Question

Я получаю информацию о зрелище, отправляя GET-запрос в API мест Google. К сожалению, некоторые достопримечательности имеют поле объекта 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-if не охватывают случай, когда sight.opening_hours и sight.opening_hours.weekday_text не существует? Я думаю, что ошибка исходит от v-for, так как, если я удаляю его, все работает нормально.

Answer 1

Вам нужно переписать ваш код, например «проверка состояния на внешнем уровне и итерация внутри».Вам, вероятно, нужен элемент template.

template(v-if="sight.opening_hours && sight.opening_hours.weekday_text")
  p(
    v-for="(day, index) in this.sight.opening_hours.weekday_text",
    :key="index"
  )
    | {{ day }}

Answer 2

https://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>