In vue.js 2 measure component height when slots are set

Question

I'm looking for a way to read the height (clientHeight) of a component after its slots are rendered (in the DOM), and then set the result to reactive data for further calculations.

According to the hook documentation updated :

DOM components will be updated when this hook is called, so you can perform DOM-dependent operations here

... This is fine until then, but the documentation also says:

However, in most cases, you should avoid changing the state inside the hook

... It seems like it is not forbidden to set reactive data in hook updated .

The result is very unstable, sometimes I get clientHeight after the slots are displayed, and sometimes before they are rendered.

It seems that the “updated” hook is called at the right time, but changing the reactive data in this hook does not work systematically.

test: https://jsfiddle.net/4wv9f052/5/

Answer 1

Use nextTick

 Vue.nextTick(() => { this.height = this.$el.clientHeight; }); 

https://jsfiddle.net/4wv9f052/9/