在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. .js文件中文乱码解决办法

    描述:.js文件里的中文内容在网页中显示乱码 解决办法:把JS文件的编码改为utf-8 VS2013解决步骤:文件——高级保存选项——Unicode (UTF-8带签名)  代码页 65001

  2. iPhone开发视频教程 Objective-C部分

    第一.二章  OC基础语法 iPhone开发教程 第一章 OC基础语法  iPhone开发概述-必看 (1.1) http://www.apkbus.com/android-102215-1-1.ht ...

  3. mysql replace substring 字符串截取处理

    SELECT a1,a2,replace(a2, "豫ICP备16006180号-", "") a22,a3,a4,a5 FROM `aaab` order b ...

  4. SpringBoot的数据访问

    一.JDBC方式 引入starter. <dependency> <groupId>org.springframework.boot</groupId> <a ...

  5. C#之Action和Func

    以前我都是通过定义一个delegate来写委托的,但是最近看一些外国人写的源码都是用action和func方式来写,当时感觉对这很陌生所以看起源码也觉得陌生,所以我就花费时间来学习下这两种方式,然后发 ...

  6. java Spring boot项目简单说明

    前言 一直从事.NET开发,但一直有种想去探索Java世界的冲动,今天终于有时间来尝试一下,以下是自己探索过程的简要记录. 一.开发工具 开发工具选用 IntelliJ IDEA社区版(免费),安装教 ...

  7. java引用传递，值传递

    2个interger的引用对象传给一个swap方法在方法内部进行交换 1.1 java中方法参数传值方式 java中方法传参数都是值传递的,只不过根据参数的类型是引用类型还是非引用类型 引用类型传递的 ...

  8. 【Git】六、分支管理&冲突解决

    上一节讲了如何和远端的仓库协同工作,这一节介绍一下分支 ---------------------------- 提要 //创建一个分支dev $ git branch dev //切换到dev分支 ...

  9. IDEA找不到maven仓库无法下载依赖解决办法

    1.确认Maven安装正常,在cmd窗口输入mvn -version 可以获得版本号: 2. 确认maven安装包下/conf/setting.xml配置文件正确 本地仓库位置: <localR ...

  10. win10家庭版设置移动热点出现“我们无法设置移动热点”

    寝室wifi卡到爆炸,  买了一个360随身WiFi,可是360随身WiFi烧坏了  ...然后我就一个星期没玩游戏了 今天本来想开电脑的wifi试一试,结果发现无法设置热点 纳闷了 百度一下,发现都 ...