在mounted(){}钩子里面使用this.$refs.xxx，打印出来的却是undefined？

DOM结构已经渲染出来了，但是如果在DOM结构中的某个DOM节点使用了v-if、v-show或者v-for（即根据获得的后台数据来动态操作DOM，即响应式），那么这些DOM是不会再mounted阶段找到的。

所以如果在mounted钩子中使用$refs，如果ref是定位在有v-if、v-for、v-show中的DOM节点，这些判断下的DOM还没渲染，返回来的只能是undefined，因为在mounted阶段他们根本不存在！

如果说mounted阶段是加载阶段，那么updated阶段则是完成了数据更新到DOM的阶段(对加载回来的数据进行处理)，此时，ref、数据等等全部都挂载到DOM结构上去，在update阶段使用this.$refs.xxx，就100%能找到该DOM节点。

updated与mounted不同的是，在每一次的DOM结构更新，vue都会调用一次updated(){}钩子函数！而mounted仅仅渲染完成时只执行一次而已。

简单来说，只要在调试的时候，能看到元素的存在，在updated生命周期里可以使用this.$refs.xxx找到对应的DOM节点！

mounted里面this.$refs.xxx的内容是undefined的更多相关文章

  1. 父组件调用子组件中的方法- this.$refs.xxx.子组件方法();

    子组件中有一个说的方法 在父组件中去调用当你点击的时候 去调用子组件中的方法 fu.vue 在父组件的方法中调用子组件的方法,很重要 this.$refs.mychild.parentHandlecl ...

  2. vue中使用refs定位dom出现undefined？

    之前在公司做项目,一直感觉用ref来定位dom节点挺方便的.但是期间遇到了一个问题,就是在mounted(){}钩子里面使用this.$refs.xxx,打印出来的却是undefined? 于是我就对 ...

  3. vue里碰到 $refs 的问题

    记录困惑自己一个简单的问题...(瞬间感觉官方文档的强大) 在自己做的一个项目中,遇到一个列表页,根据id能进入详情页(动态匹配路由),详情页是单独的一个组件,在这个详情的组件里,我想获取内容给你区域 ...

  4. 关于vue里的$refs属性

    vuejs的极大程度的帮助减少了对dom的操作,他主要通过添加ref属性,但是当获取this.$refs属性时,稍有不注意就会输出undefined导致我们对dom节点的操作报错. this.$ref ...

  5. LaTeX内容总结

    欢迎关注我的社交账号: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://gith ...

  6. [深入React] 8.refs

    我们可以从 this.refs.xxx 获取到对象,有俩种情况: <input type="text" ref="name"/> 取到的是DOM元素 ...

  7. vue复制textarea文本域内容到粘贴板

    vue实现复制内容到粘贴板   方案:找到textarea对象(input同样适用),获取焦点,选中textarea的所有内容,并调用document.execCommand("copy&q ...

  8. tinymce 中我输入的内容 清空问题

    <tinymce v-model="formItem.hDtContent" ref="content" @accessory="handlea ...

  9. tomcat内容总结

    tomcat的安装以及配置环境变量 1.tomcat的官网下载地址:http://tomcat.apache.org/ tomcat有很多版本,有解压版 和 安装版,还分windows (还分为32位 ...

随机推荐

  1. luogu P1646 [国家集训队]happiness (最小割)

    高一一班的座位表是个n*m的矩阵,经过一个学期的相处,每个同学和前后左右相邻的同学互相成为了好朋友.这学期要分文理科了,每个同学对于选择文科与理科有着自己的喜悦值,而一对好朋友如果能同时选文科或者理科 ...

  2. docker 第五篇 存储

    镜像概述复习 Docker镜像由多个只读层叠加而成,启动容器时,Docker会加载只读镜像层并在镜像栈顶部添加一个读写层 如果运行中的容器修改了现有的一个已经存在的文件,那改文件将会从读写层下面的只读 ...

  3. Flutter 36: 图解自定义 View 之 Canvas (三)

    小菜继续学习 Canvas 的相关方法: drawVertices 绘制顶点 小菜上次没有整理 drawVertices 的绘制方法,这次补上:Vertice 即顶点,通过绘制多个顶点,在进行连线,多 ...

  4. 第一篇.markdown

    目录 Day 01 1.markdown的使用感受 2.markdown的基本语法 2.1 标题 2.2 加粗 2.3 斜体 2.4 高亮 2.5 上标 2.6 下标 2.7 代码引用(>式) ...

  5. shell脚本编写之Hello World

    Linux下编写第一个Shell脚本 //创建一个.sh文件 vi demo1.sh //按i进入编辑模式 echo "Hello World !" //按esc→shift+:→ ...

  6. 【异常】 Ensure that config phoenix.schema.isNamespaceMappingEnabled is consistent on client and server.

    1 详细异常 ror: ERROR 726 (43M10): Inconsistent namespace mapping properties. Ensure that config phoenix ...

  7. vue-element-admin实现模板打印

    一.简介 模板打印也叫”套打“,是业务系统和后台管理系统中的常用功能,B/S系统中实现”套打“比较繁琐,所以很多的B/S系统中的打印功能一直使用的是浏览器打印,很少实现模板打印.本篇将介绍在Vue E ...

  8. sql 连接数查询

    SELECT * FROM master.dbo.sysprocesses WHERE dbid IN ( SELECT dbid FROM master.dbo.sysdatabases WHERE ...

  9. log4j2 日志打两遍的问题

    在使用log4j2的时候,一般都需要不同的日志分类打印不同的日志等级,如下面的配置 <!-- 用于指定log4j自动重新配置的监测间隔时间,单位是秒 --> <configurati ...

  10. linux基础_使用指令

    1.指令运行级别 (0)关机 (1)单用户(找回丢失密码) (2)多用户无网络服务 (3)多用户有网络服务 (4)保留 (5)图形界面 (6)重启 /etc/inittab:系统的运行级别配置之文件 ...