在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. 怎样创建一个canvas画布环境

    1. 由于canvas画布在网页中, 所以需要在html中添加canvas标签: <!DOCTYPE html> <html lang="en"> < ...

  2. Java并发（思维导图）【待评估、删除】

    1, 2, 3,常用函数 Semaphore import java.util.concurrent.Semaphore;Semaphore name=new Semaphore(n); name.a ...

  3. C语言两个特别大的整数类型相加超出范围使用两个技巧

    技巧1:用long (%ld)或者long long(%lld)类型存取 技巧2:当两个同号的数字相加,放到等号的另一边,变成减号 问题: 给定区间[-2的31次方, 2的31次方]内的3个整数A.B ...

  4. 远程连接windows2003桌面无法使用剪切板的有效解决方法

    远程桌面控制服务器时,无法剪切.粘贴一些东西,上网搜了一下,原来是rdpclip.exe(remote desktop clipboard)不起作用了.此程序负责管理本地机与远程服务器之间共享剪切板, ...

  5. VBA学习资料分享-3

    VBA创建/发送OUTLOOK邮件时怎么加上默认签名呢?用过OUTLOOK写邮件的人都知道,如果你设置了默认签名,那么在创建空白邮件的时候就会自动加上你设置的签名.根据这一特性,我们可以在用VBA创建 ...

  6. JSON在JS中的应用

    一. JSON在JS中的应用: 首先解释下JSON对象与普通js对象字面量定义时格式的区别: Js对象字面量定义格式: var person = { name:"Wede", ag ...

  7. windows下Jmeter压测端口占用问题（亲测有效）

    windows下Jmeter压测端口占用问题 1 报错信息描述 压测的初期,在设置了 150qps/s 的并发数下压测几分钟后 Jmeter 就出现了如下报错. JAVA.NET.BINDEXCEPT ...

  8. 捕捉Promise reject 错误

    var sleep = function (time) { return new Promise(function (resolve, reject) { setTimeout(function () ...

  9. 数据库 master拒绝了 create database 权限

    1.通过windows身份验证方式登录 2.为登录名赋予服务器角色权限,其中dbcreator权限表示允许新增和修改权限,sysadmin权限是管理员权限,包含dbcreator范围,若不追求权限精准 ...

  10. LED点阵显示

    /*********************************************************** 8*8LED点阵---显示数字实验 实现现象:下载程序后点阵上显示数字0 注意 ...