关于this.$refs获取不到dom的可能原因及解决方法
更新时间：2023年11月14日 10:47:52 作者：我坑我承认
这篇文章主要介绍了关于this.$refs获取不到dom的可能原因及解决方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
背景
搞饿了么高仿APP时，使用
this.$refs.wrapper.getElementsByClassName('food-list')时获取不到dom节点
正常能获取到应该是如下图：
然后我又用了网上的方法：
this.$refs.foodList （foodList是li的dom节点）
结果还是刷新页面时获取不到dom
然后我对比了网友访的饿了么的源码，下面是网友的
下面是我的：
然后官网的解释是：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在
问题解决
1.在data里面写上一个属性
changValue=null
如下图：
2.在mounted钩子函数里写一个超时调用
setTimeout(() => {
//修改数据
this.changValue = 1;
//DOM还没更新
this.$nextTick(() => {
//DOM现在更新了
this.calculateHeight();
});
},0);
使得每次挂载完成时changValue这个属性的值获得改变，然后调用this.$nextTick()就可以更新DOM了。
其他例子：
如果是第一次打开模态框时无法获取this.$refs，可以让模态框打开时修改一个data对象中的值，然后执行this.$nextTick()就可以更新DOM了。
3.测验结果
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇vue中更改数组中属性,在页面中不生效的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
el-form组件提供了表单验证的功能,可以通过在el-form上绑定rules属性,并在el-form-item上设置prop属性来进行校验,这篇文章主要给大家介绍了关于el-form组件清除校验提示正确方法(前端技能提升)的相关资料,需要的朋友可以参考下2023-12-12
本文主要介绍了vue全局接入百度地图的实现示例，文中根据实例编码详细介绍的十分详尽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要给大家介绍了关于Vue管理系统前端之组件拆分封装的相关资料，文中通过实例代码结束的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2020-08-08
这篇文章主要为大家详细介绍了vue移动端实现红包雨效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
本篇文章主要介绍了Vue引入远程JS文件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
这篇文章主要为大家详细介绍了vue实现表格合并功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
element中TimePicker时间选择器禁用部分时间(显示禁用到分钟)
这篇文章主要介绍了element中TimePicker时间选择器禁用部分时间(显示禁用到分钟)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
微信的浮窗，大伙应该都用过，当我们正在阅读一篇公众号文章时，突然需要处理微信消息，点击浮窗，在微信上会有个浮标，点击浮标可以再次回到文章。今天小编抽空给大家介绍vue 实现微信浮标效果，感兴趣的朋友一起看看吧2019-09-09
这篇文章主要介绍了何时/使用 Vue3 render 函数的教程详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-07-07
最新评论