В vue.js 2, измеряет высоту компонента после отображения слотов

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

согласно документации updated припев:

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

... До тех пор все в порядке, но документация также государства:

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

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

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

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

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

1 ответов


использовать nextTick

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

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