Я использую внешний компонент Vuejs для рендеринга календаря. Внутри этого календаря отображение событий настраивается путем введения моих собственных компонентов через слоты. По какой-то причине мне нужно получить ограничивающий прямоугольник клиента этих подкомпонентов (фактически их корневой элемент div). Поэтому я установил ссылки на эти div в MyCustomComponent:
<div class="some-style"
...
ref="rootElement">
В родительском компоненте ParentComponent я также добавляю ссылку на каждый из подкомпонентов для доступа к его корневому элементу:
<div slot="slot-for-events"
...">
<my-custom-component
:ref="`ref-${id}`"
...
>
</my-custom-component>
</div>
Затем при наведении курсора на этот компонент я пытаюсь получить его координату в методе ParentComponent через:
const rect = this.$refs[`ref-${id}`].$refs.rootElement.getBoundingClientRect();
console.log('Rect:' + JSON.stringify(rect));
Однако в возвращаемом прямоугольнике все его компоненты равны нулю. Это не проблема с синхронностью, так как событие запускается позже, когда компонент монтируется. Это не проблема, так как ссылки не определены, так как все ссылки определены правильно, а rootElement правильно указывает на элемент DIV. Это просто getBoundingClientRect (), не возвращающий фактический ограничивающий прямоугольник.
Самое странное, что, если я добавлю идентификатор в те же самые div, то наберу в консоли
document.getElementById('ref-' + id).getBoundingClientRect();
правильно возвращает ограничивающий прямоугольник клиента для того же элемента, на который ссылается ref rootElement!
Есть идеи, что там происходит?