在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. Api文档生成工具与Api文档的传播（pdf）

    点击查看apidoc生成文档demo 1 环境和工具 win10 apidoc:注释生成api文档 wkhtmltopdf:apidoc生成的是html,不适合传播,于是通过wkhtmltopdf将h ...

  2. sql server 数据库中明明有值但是查询怎么都查不到值

    产生原因是因为编码问题 数据库是英文版  但是数据库中数据又是中文的 所以查询中文时需要加上N select * from customer where Username=N'张三'

  3. multer使用

    使用multer 1.      在项目中下载multer操作模块 Npm install multer  --save 前端代码: <form class="layui-form&q ...

  4. html5中本地存储概念是什么？

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话中的数据,这些数据只有在同一个会话中的页 ...

  5. liunx pip安装

    方法一 wget https://bootstrap.pypa.io/get-pip.py python get-pip.py 方法二 wget https://pypi.python.org/pac ...

  6. 通过ABAP代码判断当前系统类型，BYD还是S4 OP还是S4 Cloud

    用工具类 CL_COS_UTILITIES IS_BYD 如果是BYD系统,这个方法的实现会硬编码返回一个true, 在其他系统里则返回false,如图: IS_SUITE 原理同上,suite系统里 ...

  7. 【坑】new一个对象时，tostring报空指针异常

    错误环境 java1.8.0_111 错误描述 对某vo进行了修改,属性类型由long修改为了Long,getter.setter没有修改类型 调用该对象的new方法时抛出npe 错误原因 没深究.. ...

  8. Google C++单元测试框架GoogleTest---AdvancedGuide（译文）

    上篇在这里: 下篇在这里.

  9. zip命令分卷压缩和解压缩

    创建分卷压缩文件 zip -s 100m -r folder.zip folder/ -s: 创建分卷的大小 -r: 循环压缩文件夹下面的内容 切分已有的文件: zip existing.zip -- ...

  10. Linux内核的arch目录