关于this.$refs是undefined

2023-11-02

问题

最近在做开发的时候,遇到这样一个问题:

从后端请求到一个图片列表,需要根据返回图片的情况设置元素的宽度,这就需要这样计算list的宽度imgList.length * imgElement.clientWidth(为了在各种移动端自适应,不能直接写死宽度,需要通过元素拿到宽度)。但是在mouted钩子中请求完数据之后,this.$refs.img是undefined。

原因及解决方案

后来查询原因,因为我的img元素使用了v-for命令,是根据后台返回数据动态响应的(还有类似的v-if、v-show),因此这些dom在mouted中找不到,即使我在mouted钩子中使用await请求数据,在数据返回后马上获取元素依然获取不到,原因是此时dom元素并没有更新渲染完成,ref并没有挂载完成。因此必须要在dom更新并挂载成功之后获取才可以获取得到。有两种解决办法:

1、在updated钩子中获取元素,此时数据已经更新并dom挂载成功,此时一定可以获取到更新的dom。但是有个缺点就是在每次数据更新之后都会被调用,不是很优

2、使用this.$nextTick

vue中对nextTick给的官方解释是

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

关于this.$refs是undefined 的相关文章

  • Android系统运动传感器

    转自 https blog csdn net liang123l article details 53992197 Android平台提供了多种感应器 让你监控设备的运动 传感器的架构因传感器类型而异 重力 线性加速度 旋转矢量 重要运动
  • Windows 10 安装安卓子系统 WSA(Magisk/KernelSU)使用 WSA 工具箱安装 APK

    from https blog zhjh top archives XokySA7Rc1pkVvnxAEP5E 前提是系统为 Windows 10 22H2 10 0 19045 2311 或更高版本 尽量新 步骤 使用 WSAPatch
  • android真机和模拟器(emulator)的判断

    最近收到领导需求要判断真机和模拟器 先前项目里是有的 可能当时能用 但现在都不能用了 然后 baidu上能够找到的其实都不能用了 包括说使用cache来区分cpu架构是哈佛结构还是冯诺伊曼结构来判断的 这个其实是最不靠谱的 因为硬件结构是会

随机推荐

  • C语言函数大全-- p 开头的函数

    p 开头的函数 1 perror 1 1 函数说明 1 2 演示示例 1 3 运行结果 2 pieslice 2 1 函数说明 2 2 演示示例 2 3 运行结果 3 pow powf powl 3 1 函数说明 3 2 演示示例 3 3
  • 数据结构-冒泡排序,选择排序,插入排序,快速排序,希尔排序,堆排序

    冒泡排序 冒泡排序的思想 从头开始数据两两比较 将大的放到后面小的放到前面 经过一轮比较后就找到了该序列的最大数且将它放到了最后 再循环上述步骤找出第二大的数 第三大的数 int maoapo int a int len a为数组的首地址
  • 期货开户顺大市而逆小市

    期货的行情 有人愿意以更高的价来买入 就会涨 有人买意以更低的价格卖出 就会跌 现货市场上 一个馒头5角钱的时候 在期货市场上 如果有很多人争着买 这个馒头可能会涨到5块 或者50块 也是可能的 在这个馒头5块钱一个的时候 你感觉这个馒头太
  • ShiroFilter设计原理与实现

    Shiro提供了与Web集成的支持 其通过一个ShiroFilter入口来拦截需要安全控制的URL 然后进行相应的控制 ShiroFilter类似于如Strut2 SpringMVC这种web框架的前端控制器 其是安全控制的入口点 其负责读
  • Postgre 还原导入sql文件

    postgresql 如何导入sql文件 打开sql shell 执行如下操作 密码不显示 直接输入完成后按回车键 i C Users fulong Desktop trest3 sql 注意路径不要使用 不支持这种写法
  • Linux Kernel SMP (Symmetric Multi-Processors) 開機流程解析 Part(3) Linux 多核心啟動流程從rest_init到kernel_init與CPU

    http loda hala01 com 2011 08 android E7 AD 86 E8 A8 98 linux kernel smp symmetric multi processors E9 96 8B E6 A9 9F E6
  • Java-IO流篇-DataOutputStream

    DataOutputStream DataOutputStreams是OutputStream的子类 是数据输出流 此类继承自FillterOutputStream类 同时实现DataOutput接口 在DataOutput接口定义了一系列
  • 更新k8s证书(续签)

    下载 kubeadm x86 md5 7951a9348655b4f508b84ced66fcf371kubeadm arm md5 b11c4ce93722b07f96c2acdeaaa07e74 cd etc kubernetes cp
  • iframe的基本介绍与使用

    一 介绍 iframe 内嵌框架 是 HTML 中一种用于将一个网页嵌入到另一个网页中的标签 它可以在一个页面中显示来自其他页面的内容 在网页中 使用标签可以将一个网页嵌套在另一个网页中 实现网页间的互联互通 二 使用 标签的基本用法如下
  • MapReduce过程中setPartitionerClass、setSortComparatorClass和setGroupingComparatorClass三者关系

    Map首先将输出写到环形缓存当中 开始spill过程 job setPartitionerClass PartitionClass class 按key分区 map阶段最后调用 对key取hash值 或其它处理 指定进入哪一个reduce
  • 【测试开发】Junit 框架

    目录 一 认识 Junit 二 Junit 的常用注解 1 Test 2 Disabled 3 BeforeAll 4 AfterAll 5 BeforeEach 6 AfterEach 7 执行测试 三 参数化 1 引入依赖 2 单参数
  • 分析key原理

    总结 key是虚拟dom对象的标识 当数据发生变化时 vue会根据新数据生成新的虚拟dom 随后vue进行新虚拟dom与旧虚拟dom的差异比较 比较规则 旧虚拟dom中找到了与新虚拟dom相同的key 若虚拟dom中的内容没变 直接使用之前
  • 将一列具有相同数据的行合并到同一行

    如何将第一列具有相同数据的行合并到同一行 但要保护重复内容 将重复内容依次填充到重复行中第一行后面 首列相同的 将后面对应列各单元格内容合并到重复行中第一行后对应的单元格内 并且用 连接 对应列只有一个单元格有内容 则不添加 符号 若为空
  • 【sql】mysql索引问题笔记

    q 使用了索引就会有优化 a 然而并不是这样 一下情况都是没有作用的 1 索引字段并没有在查询条件中使用 2 条件查询的过滤结果占比过多 既索引字段为可重复的字段 常固发生此情况 3 对小表查询 此处指索引建立在小表上 联查到数据多的表的时
  • Android(java方法)上实现mp4的分割和拼接 (二)

    http blog csdn net banking17173 article details 20646251 这节谈一下如何在Android上实现mp4文件的高效率切割 业务需求举例 把一段2分钟的mp4文件切割出00 42 至 01
  • Hudi学习3:数据湖主流架构

    delta Lake Iceberg iceberg表可以扩展 Hudi 支持flink 并且支持快速upsert delete
  • VIM使用技巧专区汇总

    查找 set hlsearch 设置搜索高亮 something 在后面的文本中查找something something 在前面的文本中查找something pattern number 将光标停在包含pattern的行后面第numbe
  • 力扣:多数元素

    给定一个大小为 n 的数组 找到其中的多数元素 多数元素是指在数组中出现次数 大于 n 2 的元素 你可以假设数组是非空的 并且给定的数组总是存在多数元素 class Solution public int majorityElement
  • 频数表&频率表

    一 基本概念 1 频数表是将数据集按照某个特定列分类 分组 时观察每个类 组中数据出现次数的表 2 列联表是观测数据按两个或更多属性 定性变量分类时所列出的频数分布表 是由两个以上的变量进行交叉分类的频数分布表 3 频数也称 次数 对样本数
  • 关于this.$refs是undefined

    问题 最近在做开发的时候 遇到这样一个问题 从后端请求到一个图片列表 需要根据返回图片的情况设置元素的宽度 这就需要这样计算list的宽度imgList length imgElement clientWidth 为了在各种移动端自适应 不