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 ...
随机推荐
- python面试题之补充缺失的代码
补充缺失的代码 def print_directory_contents(sPath): """ 这个函数接受文件夹的名称作为输入参数, 返回该文件夹中文件的路径, 以及 ...
- 一句话的Android增量更新框架(增量更新)
转自:http://www.jianshu.com/p/a9ec8fa780e2 Android应用更新要使用完整的新版本Apk安装,增量更新则是提供一个新旧版本偏差数据的patch包供应用下载,然后 ...
- C# 进制转换(二进制、十六进制、十进制互转) 转载 https://www.cnblogs.com/icebutterfly/p/8884023.html
C# 进制转换(二进制.十六进制.十进制互转)由于二进制数在C#中无法直接表示,所以所有二进制数都用一个字符串来表示例如: 二进制: 1010 表示为 字符串:"1010" int ...
- Java的类加载器都有哪些,每个类加载器都有加载那些类,什么是双亲委派模型,是做什么的?
类加载器按照层次,从顶层到底层,分为以下三种: (1)启动类加载器(Bootstrap ClassLoader) 这个类加载器负责将存放在JAVA_HOME/lib下的,或者被-Xbootclassp ...
- KindEditor在eclipse里的配置方法
KindEditor介绍: kindEditor是一款国产富文本编辑器,类似fckeditor和目前比较流行的百度Ueditor.其产品官方网站为http://kindeditor.net/ Kind ...
- liunx下在线安装mysql
一:在线安装mysql 1.首先检测一下,mysql之前有没有被安装 命令:rpm -qa | grep mysql 2.删除mysql的命令: rpm -e --nodeps `rpm -qa | ...
- React Native 安卓模拟器调出Dev Setting
Android Studio 模拟器调出Dev Setting 实现热更新 cmd进入项目目录 F:\study\AwesomeProject> 执行 adb shell input keyev ...
- Hadoop(二)HDFS
海量数据处理 分而治之 核心思想: 把数据分发到多个节点 移动计算到数据附近 计算节点进行本地数据处理 优选顺序,次之随机读 一.HDFS概述 修改,先删除,再重新生成 1.架构 namenode维护 ...
- 分布式项目pom
<dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit ...
- sql 修改数据
关系数据库的基本操作就是增删改查,即CRUD:Create.Retrieve.Update.Delete.其中,对于查询,我们已经详细讲述了SELECT语句的详细用法. 而对于增.删.改,对应的SQL ...