vue.js 2에서는 슬롯이 렌더링 된 후 구성 요소의 높이를 측정합니다.

Question

구성 요소의 슬롯을 렌더링 한 후 (DOM에서) 구성 요소의 높이 (clientHeight)를 읽고 결과를 설정하는 방법을 찾고 있습니다. 더 많은 계산을위한 반응 데이터에. 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/