1.和vue的生命周期有关,必须要在从mounted开始拿,才能拿得到里面的Dom元素

2.想在element ui 对话框打开后取dom时,应该使用$nextTick,而不是直接使用this.$refs. imgLocal2

        console.log('this.$refs.imgLocal2外面', this.$refs.imgLocal2);
setTimeout(() => {
console.log('this.$refs.imgLocal2 setTimeout', this.$refs.imgLocal2);
}, 500); // 不推荐
this.$nextTick(() => {
console.log('this.$refs.imgLocal2 $nextTick', this.$refs.imgLocal2);
});

vue中this.$refs可以拿到,但是里面的属性undefind的问题的更多相关文章

  1. vue中使用refs定位dom出现undefined?

    之前在公司做项目,一直感觉用ref来定位dom节点挺方便的.但是期间遇到了一个问题,就是在mounted(){}钩子里面使用this.$refs.xxx,打印出来的却是undefined? 于是我就对 ...

  2. typescript无法识别vue中的$refs

    例如:vue-fullscreen <template> <div class="Test"> <fullscreen ref="fulls ...

  3. 针对vue中请求数据对象新添加的属性不能响应式的解决方法

    1.需要给对象添加属性时,不能采用传统的obj.属性=值,obj[属性]=值 来添加属性,在vue页面时需要这样使用 this.$set(obj,"propertyName",&q ...

  4. vue中watch检测到不到对象属性的变化的解决方法

    watch: { option: { handler(newVal) { console.log(newVal); }, deep: true, immediate: true } }, 需要深层wa ...

  5. 在vue中操作dom元素

    在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而达到操作该dom元素,以下是个参考例子 1 <template> 2 <div> 3 <div ...

  6. vue中什么样的数据可以是在视图中显示

    1. Vue中不可以添加不存在的属性,因为不存在的属性是没有getter和setter的. <div id="app"> {{msg.a}} {{msg.b}} < ...

  7. vue中如何实现数据的双向绑定

    vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...

  8. vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)

    _ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...

  9. 详解Vue中的computed和watch

    作者:小土豆 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.cn/user/2436173500265335 1. 前言 作为一名Vue ...

随机推荐

  1. Spring Cloud服务安全连接

    Spring Cloud可以增加HTTP Basic认证来增加服务连接的安全性. 1.加入security启动器 在maven配置文件中加入Spring Boot的security启动器. <d ...

  2. uoj#186 【UR #13】Yist

    题目 orz myy 首先注意到答案有单调性,于是我们可以考虑二分一个\(x\),之后去判断一下每次只使用长度为\(x\)的区间能否删出目标序列 显然我们应该贪心地删除需要删除元素中最小的那一个,感性 ...

  3. spring3+structs2整合hibernate4时报org.springframework.beans.factory.BeanCreationException: Could not autowire method: public void sy.dao.impl.UserDaoImpl.setSessionFactory(org.hibernate.SessionFactory);

    今天在spring3+structs2整合hibernate4时报如下错误,一直找不到原因: org.springframework.beans.factory.BeanCreationExcepti ...

  4. ubuntu 下 使用 Git 维护 linux kernel版本

    学习linux内核一段时间,意识到内核的版本需要严格控制.利用Git工具可以很轻松的完成不同开发人员不同模块之间的代码融合与版本控制 . 1. 首先,安装Git .可以参考廖雪峰的博客  https: ...

  5. 用JavaScript写一个JD放大镜

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. delphi 打印 PDevMode 说明

    //PDevMode = _devicemodeW;// _devicemodeW = record// dmDeviceName: array[0..CCHDEVICENAME - 1] of Wi ...

  7. SQL SELECT DISTINCT

    SQL SELECT DISTINCT(选择不同) 语法 SELECT DISTINCT语法用于仅返回不同的(different)值. 在一张表内,一列通常包含许多重复的值; 有时你只想列出不同的(d ...

  8. 【版本】Spring Cloud 版本

    Spring Cloud 版本 Spring Cloud没有数字版本号,而是对应一个开发代号 Cloud代号 Boot版本(train) Boot版本(tested) lifecycle Angle ...

  9. pandas for python

    http://pandas.pydata.org/pandas-docs/stable/user_guide/index.html 不算太难,需要拿一本线性代数看看矩阵原理即可.重点在于考虑如何运用, ...

  10. 如何使用android-support-V7包中ActionBar(Eclipse版)

    $*********************************************************************************************$ 博主推荐 ...