W pliku vue.js 2 zmierzyć wysokość komponentu po wyrenderowaniu gniazd

Question

Poszukuję sposobu odczytu wysokości (clientHeight) komponentu po wyrenderowaniu jego gniazd (w DOM), a następnie ustawieniu wyniku do reaktywnych danych do dalszych obliczeń.

Zgodnie z dokumentacją haka updated:

DOM na komponentu zostaną zaktualizowane gdy hak jest nazywany, więc można wykonywać operacje DOM-zależnych tutaj

... Do tego czasu jest ok, ale w dokumentacji jest również napisane:

Jednak w większości przypadków należy unikać zmiany stanu wewnątrz haka

... Wygląda na to, że nie jest zabronione ustawianie reaktywnych danych w haku updated.

Wynik jest bardzo niestabilny, czasami otrzymuję clientHeight po wyrenderowaniu gniazd, a czasami przed ich renderowaniem.

Wygląda na to, że "zaktualizowany" hak jest wywoływany we właściwym momencie, ale zmiana danych reaktywnych w tym haku nie działa systematycznie.

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

Answer 1

Zastosowanie nextTick

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

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