关于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中失去焦点时所触发的事件问题
这篇文章主要介绍了Vue中失去焦点时所触发的事件问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
vue组件vue-treeselect箭头和叉图标变大问题及解决
这篇文章主要介绍了vue组件vue-treeselect箭头和叉图标变大问题及解决方案，具有很好的参考价值，希望对大家有所帮助。
2022-07-07
vue3.0项目快速搭建的完整步骤记录
这篇文章主要给大家介绍了关于vue3.0项目快速搭建的相关资料,本文通过图文以及实例代码介绍的非常详细,对大家学习或者使用vue3.0具有一定的参考学习价值,需要的朋友可以参考下
2021-12-12
vue中使用animate.css实现炫酷动画效果
这篇文章主要介绍了vue中使用animate.css实现动画效果,我们使用它，只需要写很少的代码，就可以实现非常炫酷的动画效果，感兴趣的朋友跟随小编一起看看吧
2022-04-04
基于vue实现web端超大数据量表格的卡顿解决
这篇文章主要介绍了基于vue实现web端超大数据量表格的卡顿解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
vue中v-for通过动态绑定class实现触发效果
这篇文章主要介绍了vue中v-for通过动态绑定class实现触发效果,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-12-12
Vue渲染函数详解
下面小编就为大家带来一篇Vue渲染函数详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
vue实现登录页背景粒子特效
这篇文章主要为大家详细介绍了vue实现登录页背景粒子特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
Vue CLI3.0中使用jQuery和Bootstrap的方法
这篇文章主要介绍了Vue CLI3.0中使用jQuery和Bootstrap的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-02-02
Vue表情输入组件微信face表情组件
这篇文章主要为大家详细介绍了Vue表情输入组件，微信face表情组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-02-02