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. webpack3.X的学习

    文章说明,这篇主要是记录一下我学习的过程.以代码为主.一些概念啊,插件的用途说明啊不做任何说明.有任何不明白的请参照webpack中文官网https://doc.webpack-china.org/. ...

  2. USACO Milk Routing /// 优先队列广搜

    题目大意: 在n个点 m条边的无向图中 需要运送X单位牛奶 每条边有隐患L和容量C 则这条边上花费时间为 L+X/C 求从点1到点n的最小花费 优先队列维护 L+X/C 最小 广搜到点n #inclu ...

  3. zabbix--Simple checks 基本检测

    开始      Simple checks 通常用来检查远程未安装代理或者客户端的服务. 使用 simple checks,被监控客户端无需安装 zabbixagent 客户端, zabbix ser ...

  4. linux终端命令行缩短显示路径

    1,修改.bashrc文件(用户根目录下) vim 打开.bashrc文件,找到如下这行: else PS1='${debian_chroot:+($debian_chroot)}\u@\h:\w\$ ...

  5. c# DataTable第二行改为各列标题字段

    DataTable dt = ExcelHelper.ToDataTable(fileinfo.FilePath); //将datatable的第二行变为列标题字段 DataTable dt2 = n ...

  6. 2018-2-13-win10-uwp-魔力鬼畜

    title author date CreateTime categories win10 uwp 魔力鬼畜 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17: ...

  7. compiz隐藏最大化窗口标题栏

    xfwm换了compiz试试,还行,挺方便.就是这个隐藏最大化窗口的标题栏没有现成的ui设置项,google到如下解决方案: 修改后立即生效. https://planetkris.com/2009/ ...

  8. 企业级NginxWeb服务优化实战(上)

    企业级NginxWeb服务优化实战(上) 1. Nginx基本安全优化 1.1 调整参数隐藏Nginx软件版本号信息 一般来说,软件的漏洞都和版本有关,这个很像汽车的缺陷,同一批次的要有问题就都有问题 ...

  9. vue组件参数校验与非props特性

    组件参数校验 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

  10. 【leetcode】951. Flip Equivalent Binary Trees

    题目如下: For a binary tree T, we can define a flip operation as follows: choose any node, and swap the ...