解决beforeDestroy中使用document.getElementById获取不到dom

最新推荐文章于 2023-12-12 16:00:41 发布
原创 最新推荐文章于 2023-12-12 16:00:41 发布 · 666 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #html

文章讲述了在Vue.js应用中，如何在beforeDestroy生命周期钩子中正确处理事件监听移除，避免因DOM已不存在导致的问题，推荐使用this.$refs动态获取DOM元素并移除事件。

一般在beforeDestroy使用removeEventListener来移除事件监听事件

document.getElementById('popup')在beforeDestroy中获取dom为null

可以使用this.$refs.popup来获取dom

this.$refs.popup.removeEventListener("pointerleave", this.closeFloatWindow);

月伤59
关注
解决Vue中的生命周期beforeDestory不触发的问题
10-15
主要介绍了解决Vue中的生命周期beforeDestory不触发的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
浅谈vue中document.getElementById()拿到的是原值的问题
10-15
总的来说，本篇内容针对在Vue中使用`document.getElementById()`时遇到的问题提供了深入的分析和具体的解决方案，帮助开发者更好地理解Vue的工作原理以及如何在Vue项目中合理使用原生JavaScript DOM操作方法。...
[vue] beforeDestroy中dom为null？
weixin_30652879的博客
09-12 1511
场景：页面支持播放语音 跳转到其他页面时 需要在beforeDestroy中暂停播放 防止部分型号手机再下个页面中继续播放 先来看一下代码： beforeDestroy() { let _audio = document.getElementById('audioIntroduce'); console.log(_audio); _au...
DOM查询（三）
qq_51088023的博客
07-16 187
代码】DOM查询（三）
getElementById不能获取Dom
前端小白到专家的博客
07-11 1728
在quasar框架中使用vue不能获取Dom元素，显示是NULL。
document.getElementBy系列方法获取不到对象
weixin_44848356的博客
02-13 3622
getElementById取不到对象 在浏览器进行文档解析时是有顺序的，当页面加载完毕之前，或者说在相应的DOM对象加载完毕之前，对应的对象是不能获取到的。 看下面代码： <script> var temp = document.getElementById("div"); alert(temp); </script> <body> <d...
vue document.getElementById("audio"); 播完完毕
01-24
为了实现在 Vue 应用程序中监听音频文件的播放完毕事件，可以采用原生 JavaScript 的事件监听机制，并将其集成到 Vue 组件生命周期内。具体来说，在挂载阶段为 `<audio>` 标签添加 `ended` 事件监听器。 ```...
document.getElementById("chart2").getBoundingClientRect().width > 450
06-18
在 Vue 中，如果需要获取某个 DOM 元素的宽度并进行条件判断（例如 `document.getElementById("chart2").getBoundingClientRect().width > 450`），可以通过 `ref` 来引用 DOM 元素，并结合 Vue 的生命周期方法来...
// 会员查询相关事件绑定 bindMemberEvents() { // 手机号或者订单号输入回车查询 document.getElementById('searchMemberBtn').addEventListener('keypress', e => { if (e.key === 'Enter') { this.searchOrderByBarcode() } }) // 查询会员按钮 document.getElementById('removeMemberBtn').addEventListener('click', () => { this.searchOrderByBarcode() })跟上端代码结合这两段代码有什么问题吗,为什么点击搜索显示卡不存在
最新发布
11-06
b) 有可能在调用searchMember方法时，它内部调用了其他方法，而其他方法中使用了错误的参数或逻辑，导致认为卡不存在。 10. 另外，我们还需要注意：第二段代码中，searchMemberBtn绑定了keypress事件，当在某个...
document.addeventlistener 监听click，如何使用$nexttick
10-30
我们正在讨论在Vue中使用document.addEventListener监听click事件时如何结合使用$nextTick。 核心问题：在Vue中，当我们通过document.addEventListener添加点击事件监听器，有时需要在Vue更新DOM之后（例如，点击后...
document.getElementsByClassName(‘...‘)获取不到元素
m0_52542347的博客
10-18 2112
看了很多资料是由于vue没有加载出来，导致为空,但我的已经打印出来了只要使用遍历或索引就是空
Js获取不到DOM元素问题
winner_ch的博客
06-02 3024
对于想要从事前端的开发人员来讲，使用JS操作DOM是家常便饭，但是初学者在通过document对象获取HTML的DOM元素的时候，会出现DOM元素获取不到的问题，原因是对JS的执行过程不太了解。
vue中onmounted周期里获取不到dom的原因
zn_firm的博客
12-12 1846
2)带有v-for指令，当初始化时，要循环的数组没有值，这个时候是获取不到 相关dom的。重点：有v-show指令时,即使值为false，依旧能获取到相应的dom，切记他和v-if不一样。动态dom有2种情况：1）带有v-if指令，获取不到值为false的那个dom。在onmounted里可以获取到任意一个。dom，对于动态dom，他是获取不到的。注意，这里说的是静态。
vue-i18n beforeDestroy不能调用this.$t
weixin_34075268的博客
01-09 1405
提出[Bug Report]： jsfiddle.net/masongzhi/t… 因为vue-i18n在beforeDestroy中会注销this.$t，所以在beforeDestroy不能调用this.$t beforeDestroy (): void { if (!this._i18n) { return } if (this._subscribing) { t...
vue生命周期beforeDestroy销毁失败removeEventListener
三七_z
03-01 806
vue生命周期
vue生命周期
JOKEthel的博客
12-17 658
vue生命周期 beforeCreate 在这个钩子函数里只是刚开始初始化实例，拿不到实例里的任何东西，比如data和methods和事件监听等。 data: { msg: 'Ethel' }, methods: { getLists(){ return 'beauty' } }, beforeCreate() { console.log('beforeCreate',this.msg,this.getLists()) } 运行结果会报错 created 在实例创建完成后立即调用
VUE生命周期
͏⁠͏͏⁠͏ ͏⁠͏
04-11 983
vue生命周期
VUE2用ref获取不到DOM元素
weixin_51293134的博客
08-18 1789
1、VUE2用ref获取DOM元素，必须要等页面中的ref子组件加载完毕，才可以获取到2、在mounted之前的生命周期函数中获取不到，可以用this.$nextTick(()=>{})进行获取。
Vue3.0使用antd时，打开Modal框时无法获取里面的dom节点
CSND7997的博客
06-11 3588
问题：打开模态框之前，如果原本后台存有值需要，如何填写到编辑框里面？ 测试方法1：在打开模态框的方法里面，获取dom节点然后innerHTML，比如 showModalList() { data.fxModel = true; document.getElementById("info")?.insertAdjacentHTML("afterbegin", props.fxValue); }, 报错document.getElementById(“info”)找不
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值