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 ...
随机推荐
- 微信公众号开发笔记-验证token
开发 话不多说我们直接进入主题 我们先去微信公众号申请一个公众号: 申请完成之后我们找到开发下的基本配置 然后找到进行基本配置,我们需要一个url地址来验证,这里的地址必需要是外网,Token是我们任 ...
- python调用tushare的pro_bar通用行情接口
接口名称:pro_bar 更新时间:股票和指数通常在15点-17点之间,数字货币实时更新,具体请参考各接口文档明细. 描述:目前整合了股票(未复权.前复权.后复权).指数.数字货币.ETF基金.期货. ...
- c# PID算法入门
离开工控行业已经有一段时间了,最近回忆起以前的工作,又对 PID 算法有了兴趣.所以写了一个小项目,希望可以帮到需要的人,也算是对那段工作经历的一个总结. 这是一个 winform 的项目.负载是一个 ...
- 【目录】mysql 进阶篇系列
随笔分类 - mysql 进阶篇系列 mysql 开发进阶篇系列 55 权限与安全(安全事项 ) 摘要: 一. 操作系统层面安全 对于数据库来说,安全很重要,本章将从操作系统和数据库两个层面对mysq ...
- 区别:javascript:void(0);javascript:;
2015-07~2015-08 区别:javascript:void(0);javascript:; href="#",包含了一个位置信息.默认的锚是#top,也就是网页的上端. ...
- su - 运行替换用户和组标识的shell
SYNOPSIS(总览) su [OPTION]... [-] [USER [ARG]...] DESCRIPTION(描述) 修改有效用户标识和组标识为USER的. -, -l, --login 使 ...
- Linux 登录、注销与关机
Linux 登录.注销与关机 这里主要学习的是命令行环境下的相关操作. 一.登录 Linux 默认的情况下会提供六个终端来让用户登录,切换的方式为使用:[Ctrl + Alt + F1 ~ F6]的组 ...
- Codeforces Round #568 (Div. 2) G2. Playlist for Polycarp (hard version)
因为不会打公式,随意就先将就一下? #include<cstdio> #include<algorithm> #include<iostream> #include ...
- C++使用cout输出中文,打印出来是乱码
windows下的控制台使用的是gbk编码.你输出的是unicode.在Vs中更改高级保存选项,将Unicode改为GB类型(比如GB18030)
- MVC模式和MVVM模式简单理解
相信这是两个耳熟能详的词了,MVC广泛的用到了java的各种框架当中,比如Struts2, SpringMVC等,作为B/S架构开发,MVS模式也是我们必须掌握的. mvc一步一步演化之后有了现在的M ...