Как избежать получения ошибки "TypeError: не удается прочитать свойство 'weekday_text' неопределенного", когда у некоторых объектов есть поле, а у некоторых нет?

#javascript #vue.js #vuejs2

Вопрос:

Я получаю информацию о виде, отправляя запрос GET в API Google places. К сожалению, у некоторых объектов есть opening_hours поле объекта, которое само по себе имеет weekday_text open_now поля и, НО у некоторых объектов этого нет, поэтому я получаю ошибку

 <p v-if='sight.opening_hours amp;amp; sight.opening_hours.open_now'>Open now</p>
<p v-if='sight.opening_hours amp;amp; !sight.opening_hours.open_now'>Closed now</p>
<p v-if='sight.opening_hours amp;amp; 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, поскольку, если я ее удалю, все будет работать нормально.

Ответ №1:

https://v2.vuejs.org/v2/guide/conditional.html#v-if-with-v-for v-if и v-for вместе не рекомендуется

 <div v-if='sight.opening_hours amp;amp; 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 amp;amp; sight.opening_hours.weekday_text">
  <p v-for='day in this.sight.opening_hours.weekday_text'>{{ day }}</p>
</template>

1. Спасибо, объединение v-if и v-for, похоже, было проблемой, как вы и предлагали.

2. сначала у yes v-for будет предпочтение, вы можете использовать v-if , если вам нужно что-то проверить в day

Ответ №2:

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

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