vue中this.$refs可以拿到,但是里面的属性undefind的问题
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的问题的更多相关文章
- vue中使用refs定位dom出现undefined?
之前在公司做项目,一直感觉用ref来定位dom节点挺方便的.但是期间遇到了一个问题,就是在mounted(){}钩子里面使用this.$refs.xxx,打印出来的却是undefined? 于是我就对 ...
- typescript无法识别vue中的$refs
例如:vue-fullscreen <template> <div class="Test"> <fullscreen ref="fulls ...
- 针对vue中请求数据对象新添加的属性不能响应式的解决方法
1.需要给对象添加属性时,不能采用传统的obj.属性=值,obj[属性]=值 来添加属性,在vue页面时需要这样使用 this.$set(obj,"propertyName",&q ...
- vue中watch检测到不到对象属性的变化的解决方法
watch: { option: { handler(newVal) { console.log(newVal); }, deep: true, immediate: true } }, 需要深层wa ...
- 在vue中操作dom元素
在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而达到操作该dom元素,以下是个参考例子 1 <template> 2 <div> 3 <div ...
- vue中什么样的数据可以是在视图中显示
1. Vue中不可以添加不存在的属性,因为不存在的属性是没有getter和setter的. <div id="app"> {{msg.a}} {{msg.b}} < ...
- vue中如何实现数据的双向绑定
vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...
- vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)
_ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...
- 详解Vue中的computed和watch
作者:小土豆 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.cn/user/2436173500265335 1. 前言 作为一名Vue ...
随机推荐
- js中继承的实现,原型链的知识点归纳,借用构造函数,组合继承(伪经典继承)
博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/10/31/js%e4%b8%ad%e7%bb%a7%e6%89%bf%e7%9a%84%e ...
- 使用allure2生成精美报告
安装:brew install allure pip install allure-pytest 在测试执行期间收集结果 pytest -s –q --alluredir=./result/ 测试完成 ...
- Linux使用yum install 安装程序时,提示“另外一个程序锁定了 yum;等待它退出……”
Linux使用yum install 安装程序时,提示“另外一个程序锁定了 yum:等待它退出……” 原因: yum命令一次只能安装一个软件,所以当你下载安装第二个软件包时,系统进程锁会锁定yum,这 ...
- tinkphp5.0目录结构说明
tinkphp5.0目录结构说明 project 应用部署目录 ├─application 应用目录(可设置) │ ├─common 公共模块目录(可更改) │ ├─index 模块目录(可更改) │ ...
- android 串口 android-serialport-api
最近在做Android串口的开发,找到一个开源的串口类android-serialport-api.其主页在这里http://code.google.com/p/android-serialport- ...
- Codeforces 745E Hongcow Buys a Deck of Cards 状压DP / 模拟退火
题意:现在有n张卡片(n <= 16), 每一轮你可以执行两种操作中的一种.1:获得一张红色令牌和一张蓝色令牌.2:购买一张卡片(如果可以买的话),购买的时候蓝色卡片可以充当蓝色令牌,红色同理, ...
- push declined due to email privacy restrictions
使用git push到Github网站的时候提示: push declined due to email privacy restrictions 原因 在Github设置里有一个隐私选项 Block ...
- 问题 |无法找到Python路径,需手动配置环境变量
问题: 在命令行cmd输入Python,如果出现以下无法识别命令行的报错,说明在系统环境变量中无法找到对应之前安装的Python的路径,则需手动配置一下 怎么配置? 1.打开我的电脑——右键——属性— ...
- Linux服务器的16个监控命令
想不想知道你的服务器到底在干什么?那么你要知道本文介绍的这些基本命令.一旦你熟悉掌握了这些命令,就为成为专业的 Linux系统管理员打下了基础. 你可以通过图形化用户界面(GUI)程序来获取这些外壳命 ...
- 天照(amaterasu)
天照(amaterasu) 有些时候,出题人真的不想写背景. 总而言之,天照现在有一个长度为 $ N $ 序列,她有 $ M $ 次询问,对于第 $ i $ 次询问 $ l_i,r_i,x_i $ 你 ...