VueJS: Передача значения свойства Vuex из родительского в дочерний компонент и избегание «неопределенного»

Question

Я передаю аргумент из родительского компонента, используя свойство Vuex.Тем не менее, когда компонент загружен, свойство Vuex по-прежнему undefined, генерируя следующее сообщение об ошибке:

[Vue warn]: Ошибка при рендеринге: "TypeError: Невозможно прочитать свойство '0'of undefined "

Я передаю свойство следующим образом:

<card
    :image="$store.state.company.card_img[0].url"
></card>

Это прекрасно работает, но я хотел бы знать, как сделать это правильно, чтобы избежатьсообщение об ошибке.

Answer 1

Вы можете использовать вычисленные свойства для проверки доступных данных:

computed: {
  imageUrl: function() {
    if (this.$store.state.company && this.$store.state.company.card_img && this.$store.state.company.card_img.length > 0) {
      return this.$store.state.company.card_img[0].url
    }
    return null;
  }
}

и в шаблоне

<card
    :image="imageUrl"
></card>

Другой метод использует геттеры vuex