Высота элемента Vue под вкладкой

В настоящее время у меня есть компонент, который изначально не отображается, потому что он находится на вкладке. Этот компонент получает высоту элемента, который помещается внутрь безымянного слота по умолчанию, например:

this.$el.offsetHeight

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

Проблема, с которой я сталкиваюсь, заключается в том, что для отображения вкладки требуется немного времени. Когда я пытаюсь прочитать offsetHeight сразу, это не работает.

Однако, когда я бросаю setTimeout вокруг функции, которая считывает высоту только с задержкой 50ms, она работает отлично.

Однако я не хочу полагаться на произвольное значение типа 50ms. Есть ли способ для Vue сообщить мне, когда контент действительно отображается здесь?

Является ли нормальным наличие такой задержки между событием, передаваемым на шину событий, и моментом, когда событие обрабатывается в другом компоненте?


javascript vue.js vuejs2 vue-component
person Stephan-v    schedule 29.06.2017    source источник
comment
Попробуйте прочитать offsetHeight в обратном вызове nextTick, тогда он должен работать vuejs.org/v2/api/# Vue-nextTick   -  person Florian Haider    schedule 29.06.2017
comment
Я только что попробовал свой пример с setTimeout равным 0, и он работает. Он также работает с nextTick. Я предполагаю, что nextTick работает так же, ставя асинхронный код в очередь?   -  person Stephan-v    schedule 29.06.2017
comment
Да, у Vue есть очередь асинхронных обновлений vuejs.org/v2/guide/ reactivity.html#Async-Update-Queue   -  person Florian Haider    schedule 29.06.2017
comment
@FlorianHaider Хорошо! Спасибо за вашу помощь. Не стесняйтесь дать правильный ответ, чтобы я его принял.   -  person Stephan-v    schedule 29.06.2017

Ответы (1)


arrow_upward
1
arrow_downward

Vue использует асинхронную очередь обновлений для внесения изменений в DOM (см. https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue), поэтому используйте функцию Vue.nextTick для чтения offsetHeight:

Vue.nextTick(() => {
    // here the value will be set
    this.$el.offsetHeight
})
person Florian Haider    schedule 29.06.2017