Как получить высоту дочернего компонента?

Question

[Renhor]

Доброго времени суток! Делаю слайдер на Vue. Решил добавить анимацию Fade. Структура примерно такая:

<slider>

    <slide> 1 </slide>
    <slide> 2 </slide>
    <slide> 3 </slide>

</slider>

В родительском компоненте (slider) получаю слайды через $slots.

С обычной анимацией translate нет проблем, т.к. элементы не абсолютные.
Для анимации fade нужно расположить слайды абсолютно и переключать им opacity.

Но так же, родительскому компоненту (его DOM элементу) нужно задать высоту самого высокого слайда. Пытаюсь делать через хук mounted - однако высота расчитывается неадекватно.

this.slides.forEach((item) => {
    console.log(item.elm.clientHeight)
});

Выдает 1559, 1915, 2371 хотя высота слайдов 431, 315 и 347.

Подскажите в чем дело?

Answer 1

[Renhor]

Решение:

Использовать метод this.$nextTick()

Внутри хука mounted. Без него нет гарантии, что дочерние элементы будут смонтированы, соответственно появляется баг с высотой.

Answer 2

[lavezzi1]

Я бы так сделал https://jsfiddle.net/9vb8x3mt/

Comments

[Renhor]

Решение норм, но не работает для абсолютных элементов. А обычный translate я и сам сделал.

Не работает в том плане, что высота все так же "неадекватная"