搜索
首页web前端前端问答vue获取不到id属性怎么办

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
此 Apple ID 尚未在 iTunes Store 中使用:修复此 Apple ID 尚未在 iTunes Store 中使用:修复Jun 10, 2024 pm 05:42 PM

使用AppleID登录iTunesStore时,可能会在屏幕上抛出此错误提示“此AppleID尚未在iTunesStore中使用”。没有什么可担心的错误提示,您可以按照这些解决方案集进行修复。修复1–更改送货地址此提示出现在iTunesStore中的主要原因是您的AppleID个人资料中没有正确的地址。步骤1–首先,打开iPhone上的iPhone设置。步骤2–AppleID应位于所有其他设置的顶部。所以,打开它。步骤3–在那里,打开“付款和运输”选项。步骤4–使用面容ID验证您的访问权限。步骤

修复事件ID 55,50,98,140磁盘错误在事件查看器修复事件ID 55,50,98,140磁盘错误在事件查看器Mar 19, 2024 am 09:43 AM

若您在Windows11/10的事件查看器中发现事件ID55、50、140或98,或遇到磁盘文件系统结构损坏且无法使用的错误,请按照以下指南解决此问题。什么是事件55,磁盘上的文件系统结构损坏和不可用的意思?第55届会议,Ntfs磁盘上的文件系统结构损坏且无法使用。请在卷上运行chkMSK实用程序当NTFS无法将数据写入事务日志时,会触发事件ID55的错误,这将导致NTFS无法完成无法写入事务数据的操作。这种错误通常发生在文件系统损坏的情况下,可能是由于磁盘上存在坏扇区或文件系统对磁盘子系统的不

Vue常见面试题汇总(附答案解析)Vue常见面试题汇总(附答案解析)Apr 08, 2021 pm 07:54 PM

本篇文章给大家分享一些Vue面试题(附答案解析)。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

阿里巴巴id在哪里看阿里巴巴id在哪里看Mar 08, 2024 pm 09:49 PM

在阿里巴巴软件中,一旦您成功注册一个账号,系统就会为您分配一个独特的ID,这个ID将作为您在平台上的身份标识。但是对于许多用户来说,他们会想要查询自己的ID,但是却不知道该如何操作。那么本站小编带来下文中,就将为大家带来详细的攻略步骤介绍,希望能帮助到大家!阿里巴巴id在哪里看答案:【阿里巴巴】-【我的】。1、首先打开阿里巴巴软件,进入到首页中后我们需要点击右下角的【我的】;2、然后来到我的页面中后我们在页面的上方就可以看到【id】了;阿里巴巴id和淘宝一样吗阿里巴巴id和淘宝id不一样,但是二

5 款适合国内使用的 Vue 移动端 UI 组件库5 款适合国内使用的 Vue 移动端 UI 组件库May 05, 2022 pm 09:11 PM

本篇文章给大家分享5 款适合国内使用的 Vue 移动端 UI 组件库,希望对大家有所帮助!

腾讯视频id在哪里查看腾讯视频id在哪里查看Feb 24, 2024 pm 06:25 PM

腾讯视频id在哪里查看?腾讯视频APP中是有专属的id,但是多数的用户不知道如何查看腾讯视频id,接下来就是小编为用户带来的腾讯视频id查看方法图文教程,感兴趣的用户快来一起看看吧!腾讯视频使用教程腾讯视频id在哪里查看1、首先打开腾讯视频APP,主页面右下角【个人中心】进入到专区;2、之后进入到个人中心页面,选择【设置】功能;3、然后在设置页面,点击最下方【退出账号】;4、最后在下图所示的页面即可查看到专属的id号。

事件 ID 4660:已删除对象 [修复]事件 ID 4660:已删除对象 [修复]Jul 03, 2023 am 08:13 AM

我们的一些读者遇到了事件ID4660。他们通常不确定该怎么做,所以我们在本指南中解释。删除对象时通常会记录事件ID4660,因此我们还将探索一些实用的方法在您的计算机上修复它。什么是事件ID4660?事件ID4660与活动目录中的对象相关,将由以下任一因素触发:对象删除–每当从ActiveDirectory中删除对象时,都会记录事件ID为4660的安全事件。手动更改–当用户或管理员手动更改对象的权限时,可能会生成事件ID4660。更改权限设置、修改访问级别或添加或删除人员或组时,可能会发生这种情

聊聊vue指令中的修饰符,常用事件修饰符总结聊聊vue指令中的修饰符,常用事件修饰符总结May 09, 2022 am 11:07 AM

本篇文章带大家聊聊vue指令中的修饰符,对比一下vue中的指令修饰符和dom事件中的event对象,介绍一下常用的事件修饰符,希望对大家有所帮助!

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境