Ошибка консоли, поскольку переменная хранилища, используемая в шаблоне, заполняется только после вызова API asyn c

Question

В моем компоненте я отображаю многие свойства (показаны только два ниже) моей selectedPlan переменной хранилища после получения ее значения из хранилища:

<div>
  {{ selectedPlan.periodTitle }}
</div>
<div>
 {{ selectedPlan.currency }}
</div>

...mapGetters(['selectedPlan', 'whatever'])

Проблема: эта переменная null по умолчанию и заполняется только после того, как какой-то не связанный компонент совершает вызов API.

Переменная отображается, поэтому на экране нет проблем. Но в консоли я получаю:

TypeError: Невозможно прочитать свойство 'periodTitle' со значением NULL

Как решить эту проблему?

Answer 1

Поскольку selectedPlan может быть недоступен (или имеет значение null) при первом рендере, вы столкнулись с этой ошибкой. У вас есть один из трех способов решения этой проблемы:

1. Добавьте загрузчик и подождите, пока не станет доступен selectedPlan (лучший способ, на мой взгляд, с точки зрения UX)
2. Добавьте проверка нуля перед доступом к таким значениям, как:

{{ (selectedPlan || {}).periodTitle }}

Или, что еще лучше, используйте вычисляемое свойство:

computed: {
  safeSelectedPlan: () => {
    return this.selectedPlan || {}
  }
}

, а затем используйте safeSelectedPlan в своем шаблоне.

Безопасно используйте библиотеку вроде lodash до get значений переменных. Вот ссылка на документацию к loda sh: https://lodash.com/docs/4.17.15