关于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.测验结果
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。