У меня есть настройка родительского/дочернего компонентов, где родитель загружает данные с сервера и передает их дочерним элементам через реквизиты. В дочернем я хотел бы создать экземпляр календаря jQuery с некоторыми данными, которые он получает от родителя.
Чтобы дождаться данных перед настройкой календаря, я транслирую событие в родительском элементе, в котором у меня есть настройка прослушивателя событий для дочернего элемента.
Слушатель запускается в дочернем элементе, но если я this.$log('theProp')
, то он undefined. Тем не менее, если я проверяю компоненты с помощью VueJs devtools, между ними существует родительское/дочернее отношение, и ребенок получает поддержку в то же время.
Предел определяется для ребенка как динамический prop :the-prop="theProp"
. Поскольку ребенок действительно получает опору в конце, я предполагаю, что моя настройка верна, но, похоже, какая-то задержка. Родитель устанавливает реквизит в функции возврата вызова ajax и снова: он работает, просто с небольшой задержкой. Кажется, что.
Я также попробовал зарегистрировать прослушиватель watch
на опоре в дочернем элементе, чтобы я мог настроить календарь и убедиться, что там есть опора. Тем не менее, прослушиватель часов срабатывает, но this.$log('theProp')
по-прежнему undefined.
Если я передаю данные вместе с широковещательным вызовом, например this.$broadcast('dataLoaded', theData)
, ребенок получает его просто отлично. Но это кажется неправильным делать это таким образом, поскольку я в основном создаю свой собственный обработчик.
Я не отправляю какой-либо код, потому что компоненты довольно большие, и VueJs devtools говорят мне, что ситуация с родителем/ребенком работает.
Мне не хватает информации? Есть ли небольшая задержка между установкой значения в родительском и получающем его ребенке? Каким будет подходящий способ дождаться родительских данных у ребенка?
Обычно, когда вы просто выводите данные в шаблон, время не имеет большого значения, поскольку данные привязаны к шаблону. Но в этом случае мне действительно нужны данные для настройки календаря, или это будет неправильно.
Спасибо.
изменить 1: здесь jsfiddle: https://jsfiddle.net/dr3djo0u/1/
Кажется, он подтверждает, что данные недоступны сразу после трансляции. Тем не менее, наблюдатель работает, хотя я мог почти поклясться, что иногда this.$log('someData')
возвращал undefined
, когда я настраивал этот тестовый файл.
Но я думаю, что моя проблема может быть где-то в другом месте, я посмотрю сегодня вечером, теперь у меня нет проекта.
edit 2: выполнил еще несколько тестов. Моя проблема заключалась в том, что а) прослушиватели событий, похоже, не получают данные мгновенно, и б) я также пытался запустить календарь в обратном вызове route.data
, если someData
уже был (например, при поступлении с родителя), но это обратный вызов маршрута вызывается до того, как компонент готов, поэтому он тоже не работает.
Мое решение теперь следующее:
// works when the child route is loaded directly and parent finishes loading someData
watch: {
someData() {
this.initCalendar();
}
},
// works when navigating from parent (data already loaded)
ready() {
if (this.someData && this.someData.length) {
this.initCalendar()
}
}