vue取得不到id屬性怎麼辦

vue取得不到id屬性是因為將getElementById用在了「created()」鉤子函數中，而Vue尚未完成掛載；其解決方法就是將「created() {let serachBox = document. getElementById('searchBox');...}”程式碼遷移到“mounted()”鉤子函數中即可。

本教學操作環境：Windows10系統、vue3版、DELL G3電腦

vue取得不到id屬性怎麼辦？

#Vue中使用getElementById結果傳回元素為null ？

• 首先，我在專案中用這樣一個需求，根據客戶端螢幕尺寸動態計算主體區域的高度。

       拿到這個需求，我第一個想法是透過element.getBoundingClientRect取得固定元素的尺寸，然後透過document.body.offsetHeight」取得可視區域的高度，最終動態計算主體區域的大小。

在created()中使用getElementById

       確定思路之後便開始動手coding,於是我在created中寫瞭如下程式碼：

//此处省去无关代码
created() {
	let serachBox = document.getElementById('searchBox');
	let searchRect = serachBox .getBoundingClientRect();
	console.log('rect',searchRect );
	let dffsetHeight = document.body.offsetHeight;
	this.tHeight = ( dffsetHeight - searchRect .bottom - 100 );},

#結果控制台直接報錯了，報錯如下

       根據錯誤描述，我向上印了searchBox元素，這時控制台列印結果為null ，這就有點意思了。

mounted()中使用getElementById

仔細一看原來是我將getElementById用在了created()鉤子函數中，這時Vue尚未完成掛載，也無法透過getElementById取得Dom元素，故而控制台列印null。找到原因之後我將上述程式碼遷移到mounted()鉤子函數中，這時控制台列印出正確結果。

雖然問題找到了，但頁面的渲染結果卻無法滿足我的需求。還得繼續尋找辦法。

created()中結合this.$nextTick()實現業務需求

最終created()中結合this.$nextTick()實現業務需求最終程式碼如下：

created() {
	this.$nextTick(function () {
		let serachBox = document.getElementById('searchBox');
		let searchRect = serachBox .getBoundingClientRect();
		console.log('rect',searchRect );
		let dffsetHeight = document.body.offsetHeight;
		this.tHeight = ( dffsetHeight - searchRect .bottom - 100 );
	 })},

總結

本次bug主要是兩個面向導致。

• 一是習慣性的在created鉤子函數中處理業務邏輯

• 二主要還是對Vue的生命週期不夠熟悉，犯了迷糊。

推薦學習：《vue影片教學》

#

以上是vue取得不到id屬性怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章！