当前位置： 首页 > news >正文

vue3指定设置了dom元素的ref但是为null问题

news 2025/11/13 21:16:23

目录

问题场景

​编辑问题原因

解决方案

问题场景

可以看到我指定了元素的ref，正常来说在组件挂载完毕后可以通过ref.value正常获取到dom元素

但是实际打印出来为null

问题原因

根本原因就是v-if指令的问题，v-if指令能够控制元素是否渲染，这个数组的数据是从接口获取的，但是接口调用的时机是在onMounted之后，所以组件在onMounted之后等到接口响应拿到数据后才会渲染，错过了vue把元素dom设置ref指定变量的时机。

解决方案

 使用v-show指令代替v-if即可

 

http://www.dtcms.com/a/313758.html

相关文章：

  • Druid手写核心实现案例 实现一个简单Select 解析，包含Lexer、Parser、AstNode
  • 第三章 浏览器 【5. 事件】
  • Java项目：基于SSM框架实现的电子病历管理系统【ssm+B/S架构+源码+数据库+毕业论文+远程部署】
  • 前端开发(HTML,CSS,VUE,JS)从入门到精通！第五天(jQuery函数库)
  • 深入理解Java的SPI机制，使用auto-service库优化SPI
  • 打造个人数字图书馆：LeaNote+cpolar如何成为你的私有化知识中枢？
  • 【MySQL02】： MySQL类型
  • 深度学习TR3周：Pytorch复现Transformer
  • 软件测试自学之路
  • 架构师面试（三十九）：微服务重构单体应用
  • 第三阶段—8天Python从入门到精通【itheima】-143节（pyspark实战——数据计算——flatmap方法）
  • RAG From Scratch 系列教程-4: Query_Construction
  • 向量空间模型
  • 开源的时间跟踪工具TimeTagger
  • PHP进阶语法详解：命名空间、类型转换与文件操作
  • 动态规划技巧：深入解析“组合总和IV”与“不同的二叉搜索树”中的卡特兰数
  • 豆包1.6+PromptPilot实战：构建智能品牌评价情感分类系统的技术探索
  • Jwts用于创建和验证 ​​JSON Web Token（JWT）​​ 的开源库详解
  • 【盘古100Pro+开发板实验例程】FPGA学习 | 基于 UDP 的以太网传输实验例程
  • Oracle 在线重定义
  • git操作命令和golang编译脚本
  • 力扣301:删除无效的括号
  • Scikit-learn - 机器学习库初步了解
  • Javascript面试题及详细答案150道之（046-060）
  • （论文速读）RMT：Retentive+ViT的视觉新骨干
  • 【优选算法】分治--归并排序
  • 力扣1124:表现良好的最长时间段
  • 进程生命周期管理：从创建到终止的完整逻辑
  • [激光原理与应用-136]：光学器件 - 光经过不同的材料，为什么会有折射？
  • 基于springboot的学习辅导系统设计与实现