v-if导致用ref取不到元素的解决办法

今天在写一个功能的时候需要给一个用ref取到并且用this.$refs("")获取到的元素并且用this.$refs("XXX")[0].style渲染出来的div加一个提示框，当时第一反应是用vue的Tooltip 文字提示组件，比较方便，就用el-tooltip在外面包了一层。

错误写法：

需要提示的内容是需要在页面进行某一操作后才可以得到的，所以有可能是undefined，就自然而然的加入了v-if，但是只要这个v-if加上就开始报错，打印出来发现是this.$refs("")获取到的值undefined了。

思考以后感觉应该是加入v-if以后这个元素没有渲染出来我就用了this.$refs("")获取。

然后看了一下大家解决获取不到元素时用的方法都是

this.$nextTick(() => {this.$refs("XXX")})

因为，VUE在更新DOM的时候时异步的，所以将这个方法延迟一点就能够获取到了。

但是很明显不适用于我这种情况，因为我的情况是需要手动在页面上拖动才能出现这个DOM然后鼠标悬浮这个DOM去出现Tooltip 文字提示，但是v-if包裹住了就开始自相矛盾了，所以我在使用this.$refs("XXX")[0].style渲染出来的div里面写了一个子div，子div的宽高继承父div的宽高，在这个子div外面套了一个Tooltip，这样无论怎么加v-if都不会影响我外层用this.$refs("XXX")[0].style渲染出来的div了

正确写法：

<div class="plan1" :ref="'XXX"><el-tooltipv-if="XXX.XXX.length > 0"class="item"effect="dark":content="XXX.XXX.time"placement="top"><div style="width: 100%;height: 100%;"></div></el-tooltip>
</div>

希望对遇到同样问题的人有所帮助

v-if导致用ref取不到元素的解决办法相关推荐

Zotero 抓取知网文献失败解决办法梳理（针对问题：更新Translator无效，更新茉莉花插件无效，卸载Zotero无效，使用学校VPN访问知网）
Zotero 抓取知网文献失败解决办法梳理(针对问题:更新Translator无效,更新茉莉花插件无效,卸载Zotero无效,使用学校VPN访问知网) 问题背景解决方案一解决方案二解决方案三说 ...
java cookie 取不到_java中Servlet Cookie取不到值原因解决办法
java中Servlet Cookie取不到值原因解决办法现象: 在测试带Cookie的HTTP请求时发现,服务端用request.getHeader("cookie")可以去到 ...
Frameset导致Cookies和Session丢失的原因及解决办法
参考资料 1 Frameset导致Cookies和Session丢失的原因及解决办法 http://blog.csdn.net/zl_c/article/details/1742775 2 使用fr ...
git pull时提示错误：warning: ignoring broken ref refs/remotes/origin/HEAD的解决办法
git pull时提示错误:warning: ignoring broken ref refs/remotes/origin/HEAD的解决办法我用的是IDEA开发的GIT项目,首先找到你项目的根目 ...
python获取网页json返回空_Python用requests库爬取返回为空的解决办法
首先介紹一下我們用360搜索派取城市排名前20. 我们爬取的网址:https://baike.so.com/doc/24368318-25185095.html 我们要爬取的内容: html字段: r ...
JVM内存分析及导致内存溢出的不健壮代码及解决办法
转自:http://hi.baidu.com/fvsd3/blog/item/9baec09a301bdebcc9eaf4a2.html 一.JVM内存区域组成 java把内存分四种: 1.栈区( ...
关于JAVA中URL传递中文参数，取值是乱码的解决办法
今天遇到一个问题就是在Action当中把一条中文信息绑定在URL的后面,ActionForward到别一个页面时,用reqeust.getParameter取出是出现乱码的问题. 现解决办法如下: 1 ...
Chrome 无法抓取跳转请求的解决办法
原文昨天在抓取 post 的登录请求时发现,在发出 post 请求之后,页面会进行跳转,这样就无法在 chrome 的开发人员工具中的 network 面板中查看到请求的具体信息. 点击登录按钮后, ...
scrapy抓取的中文结果乱码解决办法
使用scrapy抓取的结果,中文默认是Unicode,无法显示中文. 中文默认是Unicode,如:\u5317\u4eac\u5927\u5b66 解决办法,原文:http://www.aisun. ...

v-if导致用ref取不到元素的解决办法

v-if导致用ref取不到元素的解决办法相关推荐

最新文章

热门文章