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
获取可视区域的高度,最终动态计算主体区域的大小。
确定思路之后便开始动手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
,这就有点意思了。
仔细一看原来是我将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
이었는데 좀 흥미롭네요. 주의깊게 살펴보면 생성된() 후크 함수에 getElementById
를 사용한 것으로 나타났습니다. 현재 Vue에서는 그렇지 않습니다. 아직 설치가 완료되지 않은 경우, Dom 요소는 getElementById
를 통해 얻을 수 없으므로 콘솔은 null
을 인쇄합니다. 이유를 찾은 후 위 코드를 mounted()
후크 함수로 마이그레이션했고 콘솔에 올바른 결과가 인쇄되었습니다. rrreee
위 내용은 vue가 id 속성을 가져올 수 없으면 어떻게 해야 하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!