vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > this.$refs获取不到dom的原因

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

作者:我坑我承认

这篇文章主要介绍了关于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.测验结果

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文