在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. 牛客 197C 期望操作数

    大意: 给定$x,q$, 每步操作$x$等概率变为$[x,q]$中任意一个数, 求变为$q$的期望操作数. 很容易可以得到$f(x,q)=\frac{\sum\limits_{i=x+1}^qf(i, ...

  2. MySQL create table语法详解

    前面在查建表时key和index的区别时,发现建表语句包含了太多信息,于是完整看看官方手册的这一小节. 该文章根据MySQL 5.7的手册作笔记,而MySQL 8.0该节地址如下: https://d ...

  3. jemeter鬓发压力测试包

    使用: 为子线程添加响应时间:https://www.cnblogs.com/duanxz/p/5464993.html 结果查看分析:聚合报告在监听器里面: https://wenku.baidu. ...

  4. C#端口、IP正则

    端口正则: string pattrn = "^[0-9]+$"; if (System.Text.RegularExpressions.Regex.IsMatch(Porttex ...

  5. sqlserver错误状态码解释

    Code Error Message 0 操作成功完成. 1 功能错误. 2 系统找不到指定的文件. 3 系统找不到指定的路径. 4 系统无法打开文件. 5 拒绝访问. 6 句柄无效. 7 存储控制块 ...

  6. javabean转成json字符首字母大写

    今天写接口的时候有个需求将接口返回的json字符串首字母大写:{"SN":"","Result":""}格式, 只需要在 ...

  7. koa 实现session登陆

    在我们访问一些网站内部内容的时候,通常都会先验证我们是否已经登陆,如果登陆了就跳转到内容页面否则就跳转或者弹出登陆页面. 但是HTTP协议是没有状态的协议,无法标识一个用户的登录状态. 于是Cooki ...

  8. SpringCloud多网卡配置(转)

    https://blog.csdn.net/lixiang987654321/article/details/88134324 docker部署过程中遇到如下问题: (1)docker容器创建之后,进 ...

  9. linux数码管驱动程序和应用程序

  10. Pycharm中查看内置函数的源码

    方法1.鼠标放在函数上,Ctrl+B,看源码 方法2.将光标移动至要查看的方法处,按住ctrl 键,点击鼠标左键,即可查看该方法的源码.