How to get the height of a child component?

Question

Vue.js

Good day! I'm making a slider with Vue. Decided to add Fade animation. The structure is something like this:

<slider>

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

</slider>

In the parent component (slider) I get the slides through $slots.
There is no problem with the normal translate animation, because elements are not absolute.
For the fade animation, you need to position the slides absolutely and switch their opacity.
But also, the parent component (its DOM element) needs to set the height of the highest slide. I'm trying to do it through the mounted hook - however, the height is calculated inadequately.

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

Gives out 1559, 1915, 2371 although the height of the slides is 431, 315 and 347.
Tell me what's the matter?

Answer 1

Solution:
Use the this.$nextTick() method
Inside the mounted hook. Without it, there is no guarantee that child elements will be mounted, so a bug with height appears.

Answer 2

I would do this https://jsfiddle.net/9vb8x3mt/