vue中onmounted周期里获取不到dom的原因

已于 2023-12-12 16:28:50 修改
阅读量984 收藏 9
点赞数 5
文章标签： vue.js javascript 前端
于 2023-12-12 16:00:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zn_firm/article/details/134951755
版权

在onmounted里可以获取到任意一个静态的dom，注意，这里说的是静态dom，对于动态dom，他是获取不到的

动态dom有2种情况：1）带有v-if指令，获取不到值为false的那个dom

                                  2)带有v-for指令，当初始化时，要循环的数组没有值，这个时候是获取不到                                        相关dom的

重点：有v-show指令时,即使值为false，依旧能获取到相应的dom，切记他和v-if不一样

解决方法：1）在nexttick中获取dom

                   2)在onUpdated中获取dom

zn_firm
关注
  • 5
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue获取dom元素注意事项
08-28
主要介绍了vue获取dom元素注意事项及vue获取dom元素的内容,需要的朋友可以参考下
基于vue1和vue2获取dom元素的方法
08-27
下面小编就为大家分享一篇基于vue1和vue2获取dom元素的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue项目获取dom元素宽高总是不准确问题
11-20
dom元素内部内容是动态的，重置数据后直接获取宽高总是不准确： this.$refs.editor[0].offsetHeight; 原因：重置数据后获取dom元素宽高时，dom元素还未渲染完毕； 解决方法：利用Vue.nectTick(callback) this.$nextTick(() => { this.$refs.editor[0].offsetHeight; }) Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调 补充知识：vue 获取 指定元素的高度宽度等（使用vue中的 ref 获取到的是 dom 元素高度或者宽度） 使用 vue 的时候，想要
详解在Vue中通过自定义指令获取dom元素
08-31
本篇文章主要介绍了详解在Vue中通过自定义指令获取dom元素 ，具有一定的参考价值，有兴趣的可以了解一下。
vue mouted 获取dom元素显示null
m0_50981596的博客
07-18 854
vue mouted 获取dom元素显示null
uniapp + vue3.2 用ref获取DOM元素一直为null
weixin_43552533的博客
06-06 2162
uniapp + vue3.2 开发小程序 用ref获取DOM元素一直为null。有人遇到同款问题并已解决的看到捞一下我…
[Vue] mounted阶段获取不到dom的原因及解决方法
老电影故事的博客
05-09 9158
问题描述 需要在dom渲染后，获取dom来进行页面自动滚动到需要的位置。 在mounted阶段用document.querySelector()以及this.$refs获取元素均获取不到。用两种方式获取元素，打印出来的结果都是undefined。 有解答说用this.nextTick(function(){…})，试了一下在我这个场景中，结果还是undefined 分析原因 在mounted阶段，若需要获取的元素或组件有v-if，v-for属性。 v-if的初始化结果为false。v-for遍历的数组初始化
vue3使用ref获取dom结果为‘null’
m0_56683897的博客
03-22 6755
这就是生命周期的问题了，setup本质上相当于vue2中的created，在创建阶段，dom元素还未完全创建完成，此时获取dom自然为null了。如果你使用了setup语法糖，那么你在使用时可能会出现ref.value取不到子组件里的值，或者报错ref.value对象为空的情况，那是因为在语法糖中获取到的是一个proxy值。setup的return中应该抛出ref封装的字段，否则ref的值只是定义了并不能响应式使用，事实上，所有ref或者reactive定义的值都应在return中抛出。
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中为了节约资源，并不是全部数据都会进行响.
关于Vue组件无法通过Dom获取元素的问题
qq_41045128的博客
07-06 3465
解决vue组件无法获取Dom元素的问题
解决vue页面DOM操作不生效的问题
11-28
猜测是vue使用的虚拟DOM，使得页面虽然已经渲染出来，但在Vue实例中让处在在虚拟DOM中，无法获取。 解决方法： 使用Vue.nextTick，看下官方材料： ‘在下次 DOM 更新循环结束之后执行延迟回调’，这句话不是特别...
在vue中获取dom元素内容的方法
08-30
本篇文章主要介绍了在vue中获取dom元素内容的方法，可以通过给标签加ref属性，这里整理了详细的代码,有兴趣的可以了解一下
Vue3如何获取和操作DOM元素
键指江湖的博客
08-08 3501
环境：vue3+ts+vite目标：1.修改DOM的文本值和样式2.获取后代子DOM元素,操作修改</</</</importfrom'vue'constreflog</pText1stylepadding0 30px;</</</</importfrom'vue'constreflogonMounted=>log</看到了吧。
vue项目引入echarts图表,代码异步,获取不到dom元素,控制台报错
qq_52619560的博客
12-08 2940
工作中遇到的小问题,记录一下解决办法。
vue3 在onMounted 调用async初始化数据函数是时，数据为空的问题
weixin_46463984的博客
03-12 1万+
vue3 在onMounted 调用async初始化数据函数时 ，数据为空的问题错误代码运行结果显示分析猜测原因验证最后修改代码结果其实这是一个很简单的问题 ，就是在``onMounted``中使用异步函数的时候要加上 ``async`` 错误代码 <script setup> import {ref,onMounted ,reactive} from 'vue' import { useRoute } from 'vue-router' import {getArticelById} from
vue在mounted中无法获取$refs绑定的dom元素
InterestAndFun的博客
12-23 4835
分析问题、解决问题 根据vue中的钩子函数来说，mounted是渲染完成之后再执行的，这时候dom元素是加载完成了的。根据$refs去获得绑定的元素，如果元素已经是加载完成的话，那绝对是能够获取到的。所以出现这种情况，只有一种可能：你的$refs所在的标签并未被渲染。 这时候就需要检查你的渲染条件是使用了v-if还是v-show，v-if只有当条件成立才去渲染dom元素，所以在条件不成立时，该元素并未被渲染。而且，当条件成立，渲染完成之后，若所选择的条件不成立，该dom元素还会被销毁。 v-show会由始到
笔记：vue3 ref查找dom元素，解决ref无法获取dom元素的问题
qiyujie_123的博客
12-03 7214
vue3 ref查找dom元素，解决ref无法获取dom元素的问题
WEB转Flutter基础学习笔记（内含vue和flutter对比）
最新发布
小易不止于搬砖的博客
05-17 670
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3 onmounted
08-28
在Vue3中，onMounted是一个生命周期钩子函数，它在组件挂载到DOM之后执行。在这个钩子函数中，你可以执行一些需要在组件渲染之前完成的操作。对于引用中的PostList组件来说，onMounted钩子函数可以用来在组件渲染之前执行一些代码。比如，在onMounted钩子函数中可以执行一些初始化数据的操作，或者发送请求获取数据等。一般来说，onMounted钩子函数适合用来处理一些与DOM相关的操作，因为在这个钩子函数执行时，组件已经被挂载到DOM上了，可以确保DOM元素已经存在。 举个例子，如果你想在PostList组件挂载到DOM之后弹出一个提示框，你可以在onMounted钩子函数中使用alert方法来实现。引用中的代码示例中已经给出了一个onMounted钩子函数的使用示例。你可以在onMounted钩子函数中写入你希望在组件挂载之后执行的代码。 需要注意的是，在Vue3中，onMounted钩子函数是通过import { onMounted } from "vue"来导入的。在使用之前，你需要先导入onMounted方法。 总之，Vue3的onMounted钩子函数可以让你在组件挂载到DOM之后执行一些代码，是一个非常有用的生命周期函数。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue3-生命周期钩子函数](https://blog.csdn.net/menghuannvxia/article/details/126127079)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [解决vue页面DOM操作不生效的问题](https://download.csdn.net/download/weixin_38549721/13198458)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值