首页  >  文章  >  web前端  >  vue获取不到id属性怎么办

vue获取不到id属性怎么办

藏色散人
藏色散人原创
2023-01-29 14:03:172134浏览

vue获取不到id属性是因为将getElementById用在了“created()”钩子函数中,而Vue尚未完成挂载;其解决办法就是将“created() {let serachBox = document.getElementById('searchBox');...}”代码迁移到“mounted()”钩子函数中即可。

vue获取不到id属性怎么办

本教程操作环境: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 );},

       结果控制台直接报错了,报错如下
8888ddfcb0551bd7efd20948414ce19.jpg

       根据报错描述,我又向上打印了searchBox元素,这时控制台打印结果为null,这就有点意思了。

mounted()中使用getElementById

仔细一看原来是我将getElementById用在了created()钩子函数中,这时Vue尚未完成挂载,也就不能通过getElementById获取Dom元素,故而控制台打印null。找到原因之后我将上述代码迁移到mounted()钩子函数中,这时控制台打印出正确结果。
bad3fe4dfd70b37980b5f1572fc327d.jpg

虽然问题找到了,但是页面的渲染结果却不能满足我的需求。还得继续寻找办法。

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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn