dom vue 加载完 执行_vue动态加载组件mounted无法获取dom的解决思路

最新推荐文章于 2024-06-26 10:05:35 发布
最新推荐文章于 2024-06-26 10:05:35 发布
阅读量1.9k 收藏 2
点赞数 1
文章标签： dom vue 加载完 执行
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39950764/article/details/112164736
版权
当在Vue的mounted钩子中尝试通过ID获取DOM元素时，由于Vue的渲染机制，可能在nextTick中仍然无法获取到。解决这个问题，可以利用Vue的自定义指令(v-lazydom)结合inserted钩子，在元素真正插入到文档时进行操作。这样可以在元素可用时执行处理，避免直接使用setTimeout。若需要处理多个元素，可通过元素的id或tag进行区分。
摘要由CSDN通过智能技术生成

有时我们在mouted方法中想通过id读取到一个dom元素，虽然官方并不推荐这种方法来操作dom。但难免有碰到这种情况，如下面

1fd503ce182847c7303524ae9c0aa697.png

一个dom元素

7d57230ad2060d8cdbe8ca99c18c8dbc.png

试图在mouted中获取 试图在nextick中获取 结果还是为空

究其原因，还是该dom元素未在文档中生成。所以用document.getelementId 是无法获取到该元素的

解决方法

在vue文档中 关于的自定义指示器中有这么一段话

d000f199597a7b4ec263847abd2e0bd6.png

通过自定义指示器的insertd hook 我们可以捕获该元素被插入到父节点的时刻，做进一步处理

于是我们可以封装这么一个directive

99380a56a0a07b7f00b51f895b67104e.png

然后在你需要捕获的dom元素中写入v-lazydom

667a7e3845a7cdf8ffffcaa2e382b150.png

只要在你包含该元素的组件中 定义一个lazyready 方法 便可获取到该元素

d279307f91da9ecabb4c131c6d0a7e49.png

至少显得比直接使用settimeout干净点

如果你有多个元素需要捕获 的话，lazyready会触发多次，这时你可以通过捕获元素的id或者tag来区分，就不展开了

weixin_39950764
关注
vue3在mounted中获取元素null
qq_48217454的博客
07-07 522
【代码】vue3在mounted中获取元素null。
dom vue 加载完 执行_浅谈Vue.js 关于页面加载完成后执行一个方法的问题
weixin_39997957的博客
12-20 985
首先我们会想着在mounted或者created里面加入想要执行的方法，但是有的时候会遇到在你执行这个方法的时候，页面还并没有被渲染完成，所以就会出现这个方法在匹配页面标签报错的情况。解决思路：1.通过子页面调用父页面的方法，因为在子页面开始渲染的时候，你的父页面肯定是已经渲染好了的，前提这里的方法中是去找寻父页面的标签。2.直接在本页面监视一个参数，发现参数被初始化了，说明页面也已经加载完成，因...
vue 动态组件名_vue动态加载组件mounted无法获取dom的解决思路
weixin_39748858的博客
11-20 1027
有时我们在mouted方法中想通过id读取到一个dom元素，虽然官方并不推荐这种方法来操作dom。但难免有碰到这种情况，如下面一个dom元素试图在mouted中获取 试图在nextick中获取 结果还是为空究其原因，还是该dom元素未在文档中生成。所以用document.getelementId 是无法获取到该元素的解决方法在vue文档中 关于的自定义指示器中有这么一段话通过自定义指示器的ins...
Vue 如何实现获取 dom 元素（父组件获取子组件的dom / ref），真的很详细
最新发布
(黎子)人生编码
06-26 2355
在 Vue 中，DOM 元素通常指的是由 Vue 实例管理的 HTML 元素。Vue 使用虚拟 DOM 来提高性能，这意味着实际的 DOM 操作比传统方法更少、更高效。ref是 Vue 中的一个属性，用于给元素或子组件注册引用信息。引用信息将会在组件的$refs对象上注册。你可以使用ref来访问 DOM 元素或子组件实例。
[Vue] mounted阶段获取不到dom的原因及解决方法
老电影故事的博客
05-09 9762
问题描述 需要在dom渲染后，获取dom来进行页面自动滚动到需要的位置。 在mounted阶段用document.querySelector()以及this.$refs获取元素均获取不到。用两种方式获取元素，打印出来的结果都是undefined。 有解答说用this.nextTick(function(){…})，试了一下在我这个场景中，结果还是undefined 分析原因 在mounted阶段，若需要获取的元素或组件有v-if，v-for属性。 v-if的初始化结果为false。v-for遍历的数组初始化
Vue3--ref使用（解决ref无法获取dom元素的问题）
热门推荐
韦_恩的博客
05-18 5万+
众所周知在vue2中，ref主要的作用还是便于快速的获取dom元素或组件，因为ref操作相比document.getElementbyId会减少dom操作的节点消耗。 具体关于vue2中ref和$refs的使用，这篇文章写的十分全面： https://www.cnblogs.com/xumqfaith/p/7743387.html 本文还是针对Vue3中ref使用进行说明，重点是模板ref的使用。 1. ref用法1：基本类型封装，使数据响应式 vue3中为了节约资源，并不是全部数据都会进行响.
created mounted 动态获取数据渲染后，获取DOM问题
weixin_34224941的博客
07-19 3027
口水记录一个问题。 ┓(;´_｀)┏ 写代码的时候，遇到一个问题，就是在created里面调用接口获取数据，利用v-for渲染DOM后，再在mounted里面调用渲染后的DOM时，一直无法获取到，显示为undefined。 按照VUE的生命周期来说 created 组件实例创建完成，属性已绑定，但DOM还未生成，$el属性还不存在。 mounted模板编译/挂载之后。 按道理，在moun...
vue3使用ref获取dom结果为‘null’
m0_56683897的博客
03-22 7759
这就是生命周期的问题了，setup本质上相当于vue2中的created，在创建阶段，dom元素还未完全创建完成，此时获取dom自然为null了。如果你使用了setup语法糖，那么你在使用时可能会出现ref.value取不到子组件里的值，或者报错ref.value对象为空的情况，那是因为在语法糖中获取到的是一个proxy值。setup的return中应该抛出ref封装的字段，否则ref的值只是定义了并不能响应式使用，事实上，所有ref或者reactive定义的值都应在return中抛出。
dom加载完再执行 vue_vue中等页面dom加载完毕后执行某方法？
weixin_39662594的博客
12-19 877
// import Swiper from '@/components/common/swiper/swiper.vue'// import { Swiper } from 'vux'import myswiper from '@/components/common/myswiper/swiper.vue'import imgData from '@/datas/detailImg.json'...
dom加载后执行 vue_【Vue】vue中等页面dom加载完毕后执行某方法？
weixin_39681644的博客
12-30 1304
最近在玩一个类似拼图的东东，业务场景就是在主图加载到页面的时候，计算主图相对页面容器的缩小放大系数，通过这个系数计算子图的左边及宽度问题：在mounted中调用计算主图的原始宽高时，提示元素为空(通过document.getElementsByClassName('main-img')[this.curIndex]获取页面元素)，因此导致所有的计算都返回0在mounted中，使用一个定时器就是好的...
VUE DOM加载后执行自定义事件的方法
10-18
在Vue.js开发中，DOM加载后执行自定义事件是一个常见的需求，特别是在数据绑定和组件交互时。本篇文章将深入探讨如何在Vue实例中处理这个问题，特别是针对案例中遇到的图片轮播初始化问题。 首先，Vue.js 提供了一...
浅谈vue中document.getElementById()拿到的是原值的问题
10-15
主要介绍了浅谈vue中document.getElementById()拿到的是原值的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
uniapp + vue3.2 用ref获取DOM元素一直为null
weixin_43552533的博客
06-06 2816
uniapp + vue3.2 开发小程序 用ref获取DOM元素一直为null。有人遇到同款问题并已解决的看到捞一下我…
vue3 获取DOM元素得到null
weixin_43996255的博客
05-08 516
通过document.getElementById('three')获取div元素为null，但是通过document.getElementById('app')可以得到。同步执行js时，id为app的div已经加载完了，但是组件中的dom还没有加载完，所以通过异步的方式获取到。这nextTick钩子中获取元素。
vue中onmounted周期里获取不到dom的原因
zn_firm的博客
12-12 1251
2)带有v-for指令，当初始化时，要循环的数组没有值，这个时候是获取不到 相关dom的。重点：有v-show指令时,即使值为false，依旧能获取到相应的dom，切记他和v-if不一样。动态dom有2种情况：1）带有v-if指令，获取不到值为false的那个dom。在onmounted里可以获取到任意一个。dom，对于动态dom，他是获取不到的。注意，这里说的是静态。
vue mouted 获取dom元素显示null
m0_50981596的博客
07-18 1042
vue mouted 获取dom元素显示null
关于mounted中拿不到elementUI组件的DOM元素问题
qq_45279180的博客
08-04 1340
最近发现了一个ElementUI的小问题，就是会出现mounted中拿不到elementUI组件的DOM元素的情况出现。我的情景如下：     在使用el-table组件时有一个需求就是有一列是一个输入框，所以我使用了插槽。后来有一个操作是需要操作输入框的DOM的，所以我就在原生事件中获取了一下，这个时候是没问题的，后来我想到获取的值可能复用所以想拿到mounted里赋值，不过拿到的结果是一个空数组。     我还是感觉挺不可
vue中mounted中无法获取到dom元素
weixin_34267123的博客
10-10 6213
一、解决方案： 加上异步setTimeout，延迟获取dom的代码的执行 mounted() { // debugger this.$nextTick(()=> { setTimeout(()=> { let el = document.querySelector('.table') console.lo...
vue在mounted中无法获取$refs绑定的dom元素
InterestAndFun的博客
12-23 5039
分析问题、解决问题 根据vue中的钩子函数来说，mounted是渲染完成之后再执行的，这时候dom元素是加载完成了的。根据$refs去获得绑定的元素，如果元素已经是加载完成的话，那绝对是能够获取到的。所以出现这种情况，只有一种可能：你的$refs所在的标签并未被渲染。 这时候就需要检查你的渲染条件是使用了v-if还是v-show，v-if只有当条件成立才去渲染dom元素，所以在条件不成立时，该元素并未被渲染。而且，当条件成立，渲染完成之后，若所选择的条件不成立，该dom元素还会被销毁。 v-show会由始到
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值