CODEWITHSUNDEEP
vuejs2vue-component
Renhor
Renhor

Reputation: 160

How to get a height of child component?

trying to make a slider by Vue.js

Have a structure like that

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

In parent component i've catch the slides through $slots. В родительском компоненте (slider) получаю слайды через $slots.

There is no problems with a standart translate animation. But if i want add a fade animation to slides, i have to:

.slider {
position: relative;
}

.slide {
position: absolute;
top: 0;
left: 0;
}

So, i've to set a height of parent element equal to highest slide.

Trying to do it in mounted hook: 

mounted() {

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

}

But it say like:

slide1 height: 1559 slide2 height: 1915 slide3 height: 2371

But real height is:

slide1 height: 431 slide2 height: 315 slide3 height: 347

Upvotes: 0

Views: 319

Answers (2)

Renhor
Renhor

Reputation: 160

Mounted hook doesn't guarantee that children will be mounted. I have to set a height in 

mounted() {

this.$nextTick(() => {
  // code
})

}

Upvotes: 1

whoacowboy
whoacowboy

Reputation: 7447

MDN is a good resource.

Try this.

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

Upvotes: 0

Related Questions