Get height of element AFTER the page is done loading

[IntellectProductions]

So this is my current dilemna:

http://jsfiddle.net/59yp3r4h/

If you look at the Fiddle, the height gets cut off (line 81 in the javascript). If you hit run, it gets it fine. I have to do a setTimeout with a 10 milisecond timeframe to get the height of the element. This looks terrible.. I thought the attached method and ready method waited until $el was available.. It's getting the wrong height because it's not loading fast enough or something.

What's a workaround for this BESIDES the setTimeout? The element is available at that time, but the height isn't available yet. It SAYS 129 pixels when I do a console.log(this.$el), but whenever I do this.$el.clientHeight, it says 76. Even though it says 129 when I look through that first console log. This makes no sense..

I'm having this issue in multiple places that I need to get the dimensions. Vue works great functionality wise, but this issue is starting to drag my work down at my workplace and personal projects. I feel like I shouldn't be using Vue because of this. I have to mess with the dimensions a LOT for my components.

Thanks for any help.

[IntellectProductions]

Figured it out. I ended up creating a mixin that issued window.onload() and called the callback function that was passed into it! So I would create a method in my methods section inside my component where everything that needed to be fired on window load would be in that method. Then on the attached() method, I just called this.onPageLoad( this.callBackFunction ). Only thing that I could see as a workaround for now.

[elcontraption]

EDIT: use the solution below.

// In your component or mixin:
created () { // would work in 'ready', 'attached', etc.
  window.addEventListener('load', () => {
    // https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
    console.log(this.$el.clientHeight)
  })
}

[pbelyaev]

ready() {

  this.$nextTick(() => {

    console.log(this.$el.clientHeight);

  });

}

[pxwee5]

In Vue2.0 the above code by @pbelyaev isn't working anymore.

Anymore ideas besides listening to window onload ?

[elcontraption]

In Vue 2.x, ready was replaced by mounted.

mounted () {
  this.$nextTick(() => {
    console.log(this.$el.clientHeight)
  })
}

[pxwee5]

@elcontraption Yes I am aware of that. Sorry should have made it clear in the beginning.

But it still didn't work. I tested on mounted() and updated() (I think updated() gets fired one time after the component is mounted) method, and both returned the wrong clientHeight.

[elcontraption]

@pxwee5 try a reduced test case? https://codepen.io/elcontraption/pen/eEbvRp/.

[pxwee5]

@elcontraption That's weird.

Let me check the code, maybe it's to do with the images not loaded yet during mount.

[ccqgithub]

@pxwee5

If you use style-loader(That use with blob:http to load css, it seems asynchronous ) instead of vue-style-loader(use