vue中ref的使用(this.$refs获取为undefined)
如果你获取到的总是空的,你注意一下:
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)的更多相关文章
- Vue.js-11:第十一章 - Vue 中 ref 的使用
一.前言 在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取 ...
- 【vue】vue中ref用法
1.获取当前元素: 例子: <div class="pop pos-a" :style="{ left: pop_x + 'px' ,top: pop_y + 'p ...
- vue中$ref的基本用法
1.使用在一般的标签上 <div id="app"> <input ref="count" type="text" v-m ...
- 17、前端知识点--Vue中ref的使用
methods里面的方法,需要手动触发才会执行. 如果想让页面一上来就执行的话,就需要写在mounted这个钩子函数中. <body> <div id="app" ...
- vue中如何不通过路由直接获取url中的参数
前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...
- vue中在页面渲染完之后获取元素(否则动态渲染的元素获取不到)
两种方法: 方法一: 使用$nextTick,在异步获得数据之后再获取元素: 方法二: 在then之后再获取该元素: 问题2:vue中监听改变数组的方法: let idx =; this.listIn ...
- Vue中 $ref 的用法
说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素)使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取注意:如果获取的是一个子组 ...
- vue中ref在input中详解
当我们在项目中遇见文本输入框的时候,获取时刻输入框中的值 1.v-model <template> <input type="text" v-model=&quo ...
- 在vue中的点击事件怎么获取当前点击的元素
首先 vue的点击事件 是用 @click = “clickfun()” 属性 在html中绑定的,在点击的函数中 添加$event 参数就可以比如<button @click = “click ...
随机推荐
- mysql中BLACKHOOL的作用
MySQL在5.x系列提供了Blackhole引擎–"黑洞". 其作用正如其名字一样:任何写入到此引擎的数据均会被丢弃掉, 不做实际存储:Select语句的内容永远是空. 和Lin ...
- 查看hive版本号
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/sheismylife/article/details/33378243 hive没有提供hive - ...
- vue中checkbox 样式自定义重写;循环遍历checkbox,拿到不同的v-model绑定值;及获取当前checked 状态,全选和全不选等功能。
开始写这个功能,不得不吐槽原始的checkbox,灰色小方块的丑陋,虽说eleUI,mintUI,等各种框架的单复选框已经对其优化,但还是不想要这种.那我们就来研究一下怎么处理它. <secti ...
- vCenter 6.0 vsca 安装遇到的一些小问题
在安装vCenter 6.0 vsca的时候,安装插件到第二个的时候,会报出一个windows installer的错误.需要联系软件管理员或者技术支持的一个error. 经过多次的测试,我终于找到了 ...
- Centos安装mysql5.6.33
下载安装包 百度网盘地址: 链接:https://pan.baidu.com/s/15xaHIqvjggS_rFP_jL-BVA 提取码:mh48 上传到服务器 mkdir mysql #在/us ...
- 六、原型(Prototype)模式
原型模式是对象的创建模式,通过给出一个原型对象来指明所要创建的对象的类型.然后用复制这个原型对象的方法来创建出更多同类型的对象. 原型模式可以不用重新初始化对象,而动态的获取对象运行时的状态.使用原型 ...
- MySQL不支持事务处理的解决方法
MySQL数据库默认的存储引擎类型是MyISAM,这种存储引擎类型不支持事务处理. 在MySQL中,只有InnoDB存储引擎类型的数据表才能支持事务处理. 因此,如果想让MySQL支持事务处理,只要将 ...
- php操作redis--列表篇
常用函数:lpush/rpush/lpop/rpop/lrange/lrem等 应用场景:关注列表,粉丝列表,发送缓冲队列等 特点:可理解为数组操作,插入和删除数据按照一定的规律排序,数据可重复 连接 ...
- QT之sqlite连接
啥也没做,按说明直接啪啪写一堆代码 QSqlDatabase db = QSqlDatabase::addDatabase("QSQLITE"); //open datebase ...
- QT之QCustomPlot(二)
怎么设置X,Y轴位置 Manages a single axis inside a QCustomPlot. Usually doesn't need to be instantiated exter ...