VUE. Странное поведение при передаче Props в компонент. Почему ошибка?

Question

[Никита Котенко]

В дочерний компонент передаю параметры, которые в данный компонент, тоже пришли через Props (объект connectors лежит в Props):

<template>
  <div>
    <connector :index="'amazon'" :url="connectors['amazon']"></connector>
  </div>
</template>

Консоль пишет:

Error in render: "TypeError: Cannot read property 'amazon' of undefined"
TypeError: Cannot read property 'amazon' of undefined

Но по факту в дочерний компонент всё пришло:


Почему консоль ругается?

Comments

[Алексей Ярков]

Почему консоль ругается?

Потому что как всегда не приведен код.
Надеюсь вы понимаете, что это ошибка не Vue, а ваша невнимательность?

[lavezzi1]

Скорее всего, в момент рендеринга компонента "connector", в "connectors" не прилетели данные.

[Evgeny Kulakov]

lavezzi1, поддержу, скорее всего дело в этом.

[Никита Котенко]

Алексей Ярков, lavezzi1, Evgeny Kulakov, @dimovich85
Заметил следующее: когда передаю в :url целиком весь объект connectors, то ошибка не появляется.

Что делать? Как быть? Насколько я понял, я нарушаю какие-то стандарты в использовании директивы?

[Evgeny Kulakov]

Никита Котенко, попробуйте так ради интереса: :url="connectors && connectors['amazon']"

[Никита Котенко]

Evgeny Kulakov,
я ничё не понял, но ошибка пропала :)
Объясните?

[Evgeny Kulakov]

Никита Котенко, ну это просто подтверждение того, что у вас connectors undefined когда к нему пытаются обратиться. При данной записи запрос к connectors['amazon'] происходит только если выполняется условие существования connectors.

[Никита Котенко]

Evgeny Kulakov, хитро) спасибо
если хотите, продублируйте в ответах, я отмечу как решение

Answer 1

[Dima Polos]

У Вас в data или computed есть переменная или функция amazon, которая что-то возвращает?
Вы в props передаете переменную, которая называется amazon, если v-bind у index уберете, то amazon станет строкой и будет переданно внутрь компонента.

Answer 2

[Evgeny Kulakov]

Можно перед получением значения из свойства объекта проверить сам объект на существование: :url="connectors && connectors['amazon']"