关于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-cli+webpack创建记事本项目，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
本篇文章主要介绍了vue2.x 父组件监听子组件事件并传回信息的方法，具有一定的参考价值，有兴趣的可以了解一下2017-07-07
vue3 + vite + ts 中使用less文件全局变量的操作方法
这篇文章主要介绍了vue3 + vite + ts 中使用less文件全局变量的操作方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
在计算字符数时,一般情况下,英文字符、数字和大部分符号都可以被视为占一个字符长度,因为它们是单个字节,然而,对于某些特殊字符,如表情符号和部分非英文字符,会被认为占据了多个字符长度,本文给介绍了vue处理emoji表情占位符的操作方法,需要的朋友可以参考下2024-06-06
Vue3+TypeScript实现Docx/Excel预览组件
这篇文章主要为大家详细介绍了如何使用Vue3+TypeScript实现Docx/Excel预览组件,文中的示例代码讲解详细,有需要的小伙伴可以参考下2024-04-04
这篇文章主要介绍了Element-ui upload上传文件限制的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
vue路由传参的使用场景一般都是应用在父路由跳转到子路由时，携带参数跳转，本文将详细介绍vue路由传参的三种方式，这三种传参方式只是针对vue Router V3版本的,需要的朋友可以参考下2023-07-07
这篇文章主要给大家介绍了关于element中一个单选框radio时的选中和取消的相关资料,文中通过图文以及代码示例介绍的非常详细,对大家的学习或者工作具有一定的参考价值,需要的朋友可以参考下2023-09-09
当我们在Vue.js项目中引用图片时，关于图片路径有以下几种情形,下面通过本文给大家分享Vue.js中的图片引用路径的方式，感兴趣的朋友一起看看吧2017-07-07
这篇文章主要介绍了vue如何将字符串的一部分处理为html文档并渲染到页面，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
最新评论