vue 프로젝트 획득dom 요소의 넓이를 해결하는 것은 항상 부정확한 문제입니다

dom 요소의 내부 내용은 동적입니다. 데이터를 리셋한 후 폭과 높이를 직접 가져오는 것은 정확하지 않습니다.
this.$refs.editor[0].offsetHeight;
원인: 데이터를 리셋한 후dom 요소의 폭이 높을 때dom 요소는 아직 렌더링되지 않았습니다.
해결 방법: Vue를 활용합니다.nectTick(callback)

this.$nextTick(() => {
 this.$refs.editor[0].offsetHeight;
}) 

Vue.nectTick()은 다음 DOM 업데이트 주기가 끝난 후 지연 콜백을 수행합니다.
보충 지식: vue에서 지정한 원소의 높이 너비 등 (vue에서ref를 사용하여dom 원소의 높이 또는 너비를 얻습니다)
vue를 사용할 때, 지정한 요소의 높이를 얻으려면 vue의ref를 사용할 수 있습니다.
ref가 일반적인 원소에 추가되면this를 사용합니다.ref.name에서 얻은 것은dom 요소입니다.
예제
페이지 html 부분에 적혀있는

페이지 메소드 섹션에 쓰기
여기서 offsetHeight는 원소의 너비를 되돌려줍니다. (원소의 너비, 내부 여백, 테두리를 포함하고 외부 여백을 포함하지 않습니다.)
let height= this.$refs.init.$el.offsetHeight;
여기 offsetHeight는 다른 속성을 얻기 위해 바꿀 수 있습니다
offsetWidth//반환 요소의 너비 (요소 너비, 내부 여백 및 테두리, 외부 여백 제외)
offsetHeight//는 요소의 높이를 반환합니다(요소 높이, 내부 여백 및 테두리, 외부 여백 제외)
clientWidth//요소의 너비를 되돌려줍니다. (요소 너비, 내부 여백 포함, 테두리와 외부 여백 포함하지 않음)
clientHeight//요소의 높이를 되돌려줍니다. (요소 높이, 내부 여백 포함, 테두리와 외부 여백 포함하지 않음)
style.width//반환 요소의 너비 (요소 너비, 내부 여백, 테두리, 외부 여백 포함하지 않음)
style.height//요소의 높이를 되돌려줍니다. (요소 높이, 내부 여백, 테두리, 외부 여백 포함하지 않음)
scrollWidth//반환 요소의 너비 (요소 너비, 내부 여백 및 넘침 사이즈, 테두리와 외부 여백 포함하지 않음), 넘침이 없는 경우,clientWidth와 동일
scrollHeigh//는 요소의 높이를 되돌려줍니다. (요소 높이, 내부 여백 및 넘침 사이즈, 테두리와 외부 여백 포함하지 않음), 넘침이 없는 경우는clientHeight와 같습니다
이외에도 단위가 있는 수치를 얻을 수 있다
let height = window.getComputedStyle(this.$refs.init).height;
이렇게 얻은 값은 단위가 있다.
이상의 이 해결 vue 프로젝트가dom 요소의 넓이와 높이를 얻는 것은 항상 부정확한 문제입니다. 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.