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 部分的

<div ref="init"></div>

寫在 頁面 方法 部分

這裡的 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元素寬高總是不準確問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。