解决vue里碰到 $refs 的问题的方法


Posted in Javascript onJuly 13, 2017

本篇文章介绍了vue里碰到 $refs 的问题,分享给大家,希望能帮助大家解决问题

记录困惑自己一个简单的问题...(瞬间感觉官方文档的强大)

在自己做的一个项目中,遇到一个列表页,根据id能进入详情页(动态匹配路由),详情页是单独的一个组件,在这个详情的组件里,我想获取内容给你区域的高度,以此来判断对底部按钮显示的位置,但是在ref的时候,就是获取不到该标签,在mounted钩子函数里打印 this.$refs,也能看到这个值,但就就是点不出来(this.$refs这个对象里这个值,但是就是获取不到,我打印的是个假值?)

解决vue里碰到 $refs 的问题的方法

在mounted函数,打印的每次都是undefined。郁闷啊...为什么啊...

重新起个项目看看..

解决vue里碰到 $refs 的问题的方法

全部正常的打印,我擦...蒙蔽了...

好吧,网上看看有没有遇到类似的...看来是我自己比较挫,没有什么资源,看来还是自己的问题,这个时候,就是看文档了...

 解决vue里碰到 $refs 的问题的方法 

感觉自己没有没有什么错啊,是按上面做的...,但是作者特别强调了$refs 不是响应式的。额,想想...不对...,我那个组件好像就是响应式,或根据id来显示不同的数据。额,好吧.。这里ref只能在根组件,才能获取,其他的都获取不到。但是能打印出来,能看到...

虽然知道了浅显的原因所在,但是自己的问题没有解决,好吧,那就暴力点吧.直接操作dom。通过控制dom来获取页面的高度。

总结: 之前就有个人和我说过,可以把$refs 当做id来看,id是唯一的,是不变的。嗯,$refs 不是响应式的。 挺像...

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript转换字符串为dom对象(字符串动态创建dom)
May 10 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
Sep 27 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 Javascript
深入理解bootstrap框架之入门准备
Oct 09 Javascript
jQuery实现弹窗居中效果类似alert()
Feb 27 Javascript
Bootstrap笔记之缩略图、警告框实例详解
Mar 09 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
Apr 28 Javascript
JavaScript一元正号运算符示例代码
Jun 30 Javascript
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 Javascript
jsonp跨域请求详解
Jul 13 #Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 #Javascript
JavaScript反弹动画效果的实现代码
Jul 13 #Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 #Javascript
详解vue-cli + webpack 多页面实例配置优化方法
Jul 13 #Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 #Javascript
js实现图片上传预览原理分析
Jul 13 #Javascript
You might like
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
Laravel实现搜索的时候分页并携带参数
2019/10/15 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
Js冒泡事件详解及阻止示例
2014/03/21 Javascript
自己编写的支持Ajax验证的JS表单验证插件
2015/05/15 Javascript
jQuery拖动布局其结果保存到数据库
2015/10/09 Javascript
AngularJS转换响应内容
2016/01/27 Javascript
基于Vue实现后台系统权限控制的示例代码
2017/08/29 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
python根据出生日期返回年龄的方法
2015/03/26 Python
Python与shell的3种交互方式介绍
2015/04/11 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
美国折扣网站:jClub
2017/08/07 全球购物
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
法国在线药房:1001Pharmacies
2021/03/07 全球购物
优秀学生干部个人的自我评价
2013/10/04 职场文书
教育专业自荐书范文
2013/12/17 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
推荐信格式范文
2014/05/09 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书