this.$refs获取不到dom的可能原因及方法解决

最新推荐文章于 2024-08-01 11:27:06 发布

置顶我坑我承认

最新推荐文章于 2024-08-01 11:27:06 发布

阅读量4.5w

点赞数 2

本文链接：https://blog.csdn.net/qq_38262910/article/details/85296932

版权

背景

搞饿了么高仿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.测验结果
在这里插入图片描述