如果你获取到的总是空的，你注意一下：

1、你在哪里调用，和你调用的对象

试试在mounted（）里面调用有效果没有

调用的对象是本来就存在的，还是需要数据渲染之后才会出现的，同理，在mounted（）里面调用看看

2、调用对象是不是数组列表

我一开始设置ref在v-for列表上，直接获取this.$refs.name.style，永远是空的，

后来才发现，this.$refs.name是一个数组，无法通过 .style 获取样式，

只能遍历这个this.$refs.name数组，在this.$refs.name[index]上设置样式

// 6.14 更新，这个说法有点问题

但是像高度宽度，可以通过offsetHeight，等来获取。

3、调用对象是否和v-if结合使用

ref不是响应式的，所有的动态加载的模板更新它都无法相应的变化。

解决方案：

　　通过

setTimeout(() => {

　　　　}, 0)

来得到数据

vue中ref的使用（this.$refs获取为undefined）的更多相关文章

  1. Vue.js-11：第十一章 - Vue 中 ref 的使用

    一.前言 在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取 ...

  2. 【vue】vue中ref用法

    1.获取当前元素: 例子: <div class="pop pos-a" :style="{ left: pop_x + 'px' ,top: pop_y + 'p ...

  3. vue中$ref的基本用法

    1.使用在一般的标签上 <div id="app"> <input ref="count" type="text" v-m ...

  4. 17、前端知识点--Vue中ref的使用

    methods里面的方法,需要手动触发才会执行. 如果想让页面一上来就执行的话,就需要写在mounted这个钩子函数中. <body> <div id="app" ...

  5. vue中如何不通过路由直接获取url中的参数

    前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...

  6. vue中在页面渲染完之后获取元素（否则动态渲染的元素获取不到）

    两种方法: 方法一: 使用$nextTick,在异步获得数据之后再获取元素: 方法二: 在then之后再获取该元素: 问题2:vue中监听改变数组的方法: let idx =; this.listIn ...

  7. Vue中 $ref 的用法

    说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素)使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取注意:如果获取的是一个子组 ...

  8. vue中ref在input中详解

    当我们在项目中遇见文本输入框的时候,获取时刻输入框中的值 1.v-model <template> <input type="text" v-model=&quo ...

  9. 在vue中的点击事件怎么获取当前点击的元素

    首先 vue的点击事件 是用 @click = “clickfun()” 属性 在html中绑定的,在点击的函数中 添加$event 参数就可以比如<button @click = “click ...

随机推荐

  1. ZABBIX 忘记登录密码

    ZABBIX 忘记登录密码 摘要 有些童鞋会忘记zabbix的登陆密码,今天给大家写一篇找回登陆密码~       ZABBIX 忘记登录密码 zabbix 刚刚在群里吹牛逼,由于账号比较多,脑子容易 ...

  2. CF1223D

    CF1223D 不需要动的一定值域连续 #include<iostream> #include<cstring> #include<cstdio> #include ...

  3. 忘记root密码

    Ubuntu密码恢复的方法如下: 1.重新启动,按ESC键进入Boot Menu,选择recovery mode(一般是第二个选项).2.在#号提示符下用cat /etc/shadow,看看用户名.3 ...

  4. idea部署tomcat项目时，在项目里打断点不能拦截

    以下内容都是基于我自己的项目(如未解决道友们的问题,请别介意) idea部署tomcat项目时,在项目里打断点不能拦截,工作中遇到的问题,记录一下(tomcat6) 当项目的以下内容配置完毕后,启动项 ...

  5. android meta_data配置数据

  6. Java中super关键字的位置

    1.子类的构造函数如果要引用super的话,必须把super放在函数的首行. 例如: class Base  { Base()  {  System.out.println("Base&qu ...

  7. MYSQL增量备份与恢复

    vim /etc/my.cnf在[mysqld]下添加max_binlog_size = 1024000 //二进制日志最大1M 要进行mysql的增量备份,首先要开启二进制日志功能方法一:在/etc ...

  8. Navicat定时 同步数据库

    转载:https://www.cnblogs.com/DFX339/p/11646812.html 我是用在了 mysql 和 sql server 数据同步(操作一模一样) 好文章,简单粗暴.适合我 ...

  9. git安装和使用方法url

    1.如何在ubuntu下使用Github? https://blog.csdn.net/tina_ttl/article/details/51326684 https://segmentfault.c ...

  10. Linux curl 命令模拟 POST/GET 请求

    Linux curl 命令模拟 POST/GET 请求   本文链接:https://blog.csdn.net/sunboy_2050/article/details/82156402 curl 命 ...