В vue.js 2 измерьте высоту компонента после рендеринга слотов

Question

Я ищу способ прочитать высоту (clientHeight) компонента после того, как его слоты отображаются (в DOM), а затем задают результат к реактивным данным для дальнейших вычислений.

Согласно документации updated крючка:

DOM компонента будет обновлен, когда этот крючок называется, так что вы можете выполнять DOM-зависимые операции здесь

... Это нормально до тех пор, но в документации также указано:

Однако в большинстве случаев вам следует избегать изменения состояния внутри крюка

... Кажется, что это не запрещено устанавливать реактивные данные в крюке updated.

Результат очень нестабильный, иногда я получаю clientHeight после отображения слотов, а иногда и перед их визуализацией.

Кажется, что «обновленный» крюк вызывается в нужный момент, но изменение реактивных данных в этом крючке не работает систематически.

тест: https://jsfiddle.net/4wv9f052/5/

Answer 1

Использование nextTick

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

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