vue.js 2에서 슬롯이 렌더링되면 컴포넌트의 높이를 측정합니다.

vue.js 2에서 슬롯이 렌더링되면 컴포넌트의 높이를 측정합니다.

높이를 읽는 방법을 찾고 있습니다(클라이언트).슬롯이 렌더링된 후(DOM 내) 컴포넌트의 높이) 결과를 반응형 데이터로 설정하여 추가 계산을 수행합니다.

의 설명서에 따르면updated후크:

이 후크가 호출될 때 구성 요소의 DOM이 업데이트되므로 여기에서 DOM 종속 작업을 수행할 수 있습니다.

...그때까지는 괜찮지만 문서에는 다음과 같이 기재되어 있습니다.

단, 대부분의 경우 후크 내부의 상태 변경을 피해야 합니다.

...이것이 무효 데이터를 설정하는 것을 금지하고 있는 것은 아닌 것 같습니다.updated갈고리를 채우다

결과는 매우 불안정하다, 때때로 나는 이해한다.clientHeight슬롯이 렌더링된 후 또는 렌더링되기 전에 표시됩니다.

'업데이트된' 훅이 적절한 시점에 호출된 것으로 보이지만 이 훅의 반응 데이터를 변경하는 것은 체계적으로 작동하지 않습니다.

테스트: https://jsfiddle.net/4wv9f052/5/

사용

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

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

언급URL : https://stackoverflow.com/questions/41997488/in-vue-js-2-measure-the-height-of-a-component-once-slots-are-rendered