vue가 id 속성을 가져올 수 없으면 어떻게 해야 하나요?

vue는 "created()" 후크 함수에서 getElementById가 사용되고 Vue가 마운트를 완료하지 않았기 때문에 id 속성을 얻을 수 없습니다. 해결책은 "created() {let serachBox = document.getElementById('searchBox '); ...}" 코드는 "mounted()" 후크 기능으로 마이그레이션될 수 있습니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, vue3 버전, DELL G3 컴퓨터

vue가 id 속성을 가져올 수 없으면 어떻게 해야 합니까?

Vue에서 getElementById를 사용한 결과 반환된 요소가 null인가요?

• 우선 클라이언트 화면 크기에 따라 메인 영역의 높이를 동적으로 계산하기 위해 프로젝트에서 이러한 요구 사항을 사용했습니다.

이 요구 사항을 받으면 먼저 element.getBoundingClientRect를 통해 고정 요소의 크기를 얻은 다음 document.body를 통해 시각적 영역의 높이를 얻으면 좋겠다는 생각이 들었습니다. offsetHeight 를 입력하고 마지막으로 기본 영역의 크기를 동적으로 계산합니다. 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()에서 getElementById를 사용하세요

아이디어를 확인한 후 코딩을 시작해서 Created에 다음 코드를 작성했습니다.

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 );
	 })},

결과적으로 콘솔에서 직접 오류를 보고했습니다. , 오류는 다음과 같습니다

오류 보고서 설명에 따라 searchBox 요소를 위쪽으로 인쇄했는데 콘솔 인쇄 결과가 null이었는데 좀 흥미롭네요.

mounted()에서 getElementById 사용

주의깊게 살펴보면 생성된() 후크 함수에 getElementById를 사용한 것으로 나타났습니다. 현재 Vue에서는 그렇지 않습니다. 아직 설치가 완료되지 않은 경우, Dom 요소는 getElementById를 통해 얻을 수 없으므로 콘솔은 null을 인쇄합니다. 이유를 찾은 후 위 코드를 mounted() 후크 함수로 마이그레이션했고 콘솔에 올바른 결과가 인쇄되었습니다.

문제가 발견되었지만 페이지의 렌더링 결과가 내 요구 사항을 충족하지 못했습니다. 우리는 계속해서 방법을 찾아야 합니다.

• created()는 this.$nextTick()과 결합되어 비즈니스 요구사항을 달성합니다.
  마지막으로
created()는 this.$nextTick()과 결합되어 비즈니스 요구사항을 달성합니다.
• 최종 코드는 다음과 같습니다.

  rrreee

요약

이 버그는 주로 두 가지 측면에서 발생합니다.

🎜첫째, 생성된 Hook 함수에서 비즈니스 로직을 처리하는 데 익숙하지 않습니다.🎜🎜🎜🎜둘째, Vue의 수명주기에 대해 충분히 익숙하지 않아 혼란스럽습니다. 🎜🎜🎜🎜추천 학습: "🎜vue 비디오 튜토리얼🎜"🎜🎜

위 내용은 vue가 id 속성을 가져올 수 없으면 어떻게 해야 하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!