mounted里面this.$refs.xxx的内容是undefined
在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的更多相关文章
- 父组件调用子组件中的方法- this.$refs.xxx.子组件方法();
子组件中有一个说的方法 在父组件中去调用当你点击的时候 去调用子组件中的方法 fu.vue 在父组件的方法中调用子组件的方法,很重要 this.$refs.mychild.parentHandlecl ...
- vue中使用refs定位dom出现undefined?
之前在公司做项目,一直感觉用ref来定位dom节点挺方便的.但是期间遇到了一个问题,就是在mounted(){}钩子里面使用this.$refs.xxx,打印出来的却是undefined? 于是我就对 ...
- vue里碰到 $refs 的问题
记录困惑自己一个简单的问题...(瞬间感觉官方文档的强大) 在自己做的一个项目中,遇到一个列表页,根据id能进入详情页(动态匹配路由),详情页是单独的一个组件,在这个详情的组件里,我想获取内容给你区域 ...
- 关于vue里的$refs属性
vuejs的极大程度的帮助减少了对dom的操作,他主要通过添加ref属性,但是当获取this.$refs属性时,稍有不注意就会输出undefined导致我们对dom节点的操作报错. this.$ref ...
- LaTeX内容总结
欢迎关注我的社交账号: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://gith ...
- [深入React] 8.refs
我们可以从 this.refs.xxx 获取到对象,有俩种情况: <input type="text" ref="name"/> 取到的是DOM元素 ...
- vue复制textarea文本域内容到粘贴板
vue实现复制内容到粘贴板 方案:找到textarea对象(input同样适用),获取焦点,选中textarea的所有内容,并调用document.execCommand("copy&q ...
- tinymce 中我输入的内容 清空问题
<tinymce v-model="formItem.hDtContent" ref="content" @accessory="handlea ...
- tomcat内容总结
tomcat的安装以及配置环境变量 1.tomcat的官网下载地址:http://tomcat.apache.org/ tomcat有很多版本,有解压版 和 安装版,还分windows (还分为32位 ...
随机推荐
- JS中json数组多字段排序方法(解决兼容性问题)(转)
前端对一个json数组进行排序,用户需要动态的根据自己的选择来对json数据进行排序. 由于后台表设计问题所以不能用sql进行排序,这里用到了js的sort方法. 如果对单字段排序,那么很简单,一个s ...
- oracle练手(一)
练手001 1.列出至少有一个员工的所有部门 select dname from dept where deptno in (select deptno from emp); select dname ...
- 怎样理解第三方Cookie
1. Cookie往往是用来存储用户信息的, 但有些恶意站点设法伪造了带有正确Cookie的HTTP请求, 这时就会产生安全问题( CSRF 攻击 ). 这里恶意网站获取cookie的行为就是第三方c ...
- ORACLE触发器的自治事务的注意事项
直接上代码: Create OR replace Trigger TR_ROBXMX_CLDJBHHX After INSERT OR UPDATE OR DELETE ON ROBXMX1 --要监 ...
- javaIO——PushbackReader
1. 注释解释: A character-stream reader that allows characters to be pushed back into the stream. 一个允许字符被 ...
- javaIO——BufferedReader
今天来学习一下 java.io.BufferedReader ,从命名可以看出,跟前面学习的 StringReader 和 CharArrayReader 有些不一样,这些都是按照数据源类型命名,Bu ...
- js中数组方法及分类
数组的方法有很多,这里简单整理下常用的21种方法,并且根据它们的作用分了类,便于记忆和理解. 根据是否改变原数组,可以分为两大类,两大类又根据不同功能分为几个小类 一.操作使原数组改变 1.数组的 ...
- docker第二篇 Docker基础用法
Docker中的容器 lxc -> libcontainer -> runC OCI (Open Container Initiative) 由Linux基金会主导于2015年6月创立 作 ...
- LED点阵显示
/*********************************************************** 8*8LED点阵---显示数字实验 实现现象:下载程序后点阵上显示数字0 注意 ...
- async/await 处理多个网络请求同步问题
1.async/await是基于Promise的,是进一步的一种优化,await会等待异步执行完成 getProjectTask(id){ this.axios.get('/api/v1/task/' ...