vue中在mounted使用$refs获取不到DOM元素

vue中在mounted使用$refs获取不到DOM元素

  • 前言
  • 解决方案
    • 1、通过使用$nextTick来获取
    • 2、updated中获取

前言

在使用ref的时候,在mounted中通过$ref获取节点是获取不到报undefined

this.$refs.xx 为 undefined

解决方案

在mounted钩子中加载回来的数据不会在这个阶段更新到DOM中

1、通过使用$nextTick来获取

n e x t T i c k 是在下次 D O M 更新循环结束之后执行延迟回调,在修改数据之后使用 nextTick是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后使用 nextTick是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后使用nextTick,则可以在回调中获取更新后的DOM。

this.$nextTick(function () {// 调用$nextTick函数let dom1 = this.$refs.test;// o了
})

2、updated中获取

updated阶段
在实例更新完成后被调用,此时实例的数据已经重新渲染到DOM上。可以在这个阶段对DOM进行操作,但要避免无限循环的更新。

 updated () {this.contentHight = this.$refs.content.offsetHeight  },

如果未加载完成可以使用

updated () {this.$nextTick(() => {this.contentHight = this.$refs.content.offsetHeight})},

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/17852.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

商品上线搜索服务

文章目录 1.引入检索页面1.确保search目录和list.html都成功引入2.修改list.html,增加命名空间3.后端编写接口 SearchController.java4.测试访问 2.带条件分页检索1.前端要求返回数据的格式2.构建vo,SearchResult.java3.SkuInfoService.java 购买用户根据…

电脑无法远程桌面连接,关于电脑无法建立远程桌面连接的问题分析与解决方案

在信息化快速发展的今天,远程桌面连接已成为许多企业和个人用户进行远程办公、技术支持以及数据管理的必备工具。然而,当电脑无法建立远程桌面连接时,可能会对用户的工作和日常生活造成极大的不便。本文将深入分析电脑无法远程桌面连接的原因…

详解Java ThreadLocal

个人博客 详解Java ThreadLocal | iwts’s blog Java ThreadLocal ThreadLocal提供了线程内存储变量的能力,这些变量不同之处在于每一个线程读取的变量是对应的互相独立的。通过get和set方法就可以得到当前线程对应的值。 TreadLocal存储模型 ThreadLocal的静态…

Oracle EBS API创建AP发票报错:ZX_TAX_STATUS_NOT_EFFECTIVE和ZX_REGIME_NOT_EFF_IN_SUBSCR-

背景 由创建国外业务实体财务未能提供具体国家地区会计税制,而是实施人员随便选择其它国外国家地区会计税制。导致客户化创建AP发票程序报错:UNEXPECTED TAX ERROR-导入时出现意外的税务错误ZX_TAX_STATUS_NOT_EFFECTIVE-ZX_REGIME_NOT_EFF_IN_SUBSCR-ZX…

如何克隆非默认分支

直接git clone下来的我们知道是默认分支,那如何克隆其他分支呢: 比如这个,我们想克隆AdvNet。 我们可以在本地文件夹打开Git Bash 依次输入: git clone --branch AdvNet https://github.com/wgcban/SemiCD.git cd SemiCD git b…

计算机操作系统体系结构

我是荔园微风,作为一名在IT界整整25年的老兵,今天给大家讲讲操作系统。 当今的操作系统趋向于越来越复杂,因为它们提供许多服务,并支持各种硬件和软件资源(请参见“操作系统思想:尽量保持简单”&#xff0…

267 基于matlab的信号处理GUI人机交互

基于matlab的信号处理GUI人机交互,利用GUI功能完成包括振幅调制AM(Amplitude Modulation),双边带调幅信号DSB(double sideband),单边带信号SSB(single sideband )&#x…

《TCP/IP网络编程》(第十一章)进程间通信

进程间通信意味着两个不同的进程间可以交换数据,它使得不同的进程能够协同工作,实现复杂的系统功能。 1.通过管道实现进程间通信 下图是基于 管道(PIPE) 的进程间通信结构模型 管道不属于进程的资源,属于操作系统的资…

数字化工厂怎么收集,处理数据?

数字化工厂的数据收集与处理 数字化工厂是现代化工厂,利用数字技术和数据分析提高效率和优化流程。数据分析作为数字化工厂的核心技术,对数据的获取与处理至关重要。在数字化工厂中,数据的来源包括企业内部信息系统、物联网信息以及外部信息&…

美光EMMC芯片丝印型号查询 8LK17/D9PSK, OXA17/JY997

问题说明 最近在使用美光EMMC的时候,发现通过芯片丝印查询不到 芯片的规格说明书; 经过查阅资料,发现美光的EMMC芯片 “由于空间限制,FBGA 封装组件具有与部件号不同的缩写部件标记”,需要通过官网查询丝印的FBGA cod…

Autosar Dcm配置-特定NRC实现方式-基于ETAS软件

文章目录 前言工具配置代码编写总结 前言 项目开发过程中,诊断服务一般客户需求或系统需求都会有特定NRC(一般为NRC22-条件不满足),也就会有特定的条件,需要手动加代码实现。本文介绍ETAS工具中配置的接口及简单实现。 工具配置 对于每一个…

特朗普竞选带火PoliFi,以Bitget为例

以特朗普系列Meme币为代表的政治金融(PoliFi)概念币市场正在掀起热潮,前美国总统特朗普(Donald Trump)在本月稍早公开力挺加密货币,接着又在周二宣布接受比特币、以太币、SOL、USDC、DOGE…等政治献金,让相关通证高涨。 据CoinGecko数据&…

鸿蒙开发接口图形图像:【@ohos.display (屏幕属性)】

屏幕属性 屏幕属性提供管理显示设备的一些基础能力,包括获取默认显示设备的信息,获取所有显示设备的信息以及监听显示设备的插拔行为。 说明: 开发前请熟悉鸿蒙开发指导文档: gitee.com/li-shizhen-skin/harmony-os/blob/master/…

【C++】继承(二)深入理解继承:派生类默认成员函数与友元、静态成员的奥秘

目录 派生类的默认成员函数①派生类的构造函数②派生类的拷贝构造函数③派生类的赋值构造④派生类的析构函数 继承与友元继承与静态成员 前言 我们在上一章讲解了: 继承三部曲,本篇基于上次的基础继续深入了解继承的相关知识,欢迎大家和我一起学习继承 派…

探索Python中的随机数生成与统计分析

新书上架~👇全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我👆,收藏下次不迷路┗|`O′|┛ 嗷~~ 目录 一、随机数的魅力与实用性 1. 随机数生成基础 2. 批量生成随机数 二、随机数的高级应用&a…

windows中每日定时执行python脚本,解决问题

由于需要一个每天定时执行的任务,所以需要定时启动,网上看了很多方法,感觉不能在python脚本种写个while true 定时执行,占资源不说还不可靠。 最后考虑通过系统工具定时启动,发现linux中有crontab,windows…

前端 CSS 经典:水波进度样式

前言&#xff1a;简单实现水波进度样式&#xff0c;简单好看。 效果图&#xff1a; 代码实现&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"utf-8" /><meta http-equiv"X-UA-Compatible" cont…

git:Unable to negotiate问题解决

场景说明&#xff1a; 安装了Gitblit(自架的代码仓库服务)发现部分电脑无法推代码&#xff0c;报错误如下&#xff1a; Unable to negotiate with **** port 22: no matching host key type found. Their offer: ssh-rsa 并排队了账户权限问题。 解决方案&#xff1a; 1.打开问…

5.28 学习总结

一.CSS学习(一) 一、CSS简介 1、什么是CSS CSS&#xff1a;Cascading Style Sheet 层叠样式表是一组样式设置的规则&#xff0c;用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离&#xff0c;便于团队开发样式复用&#xff0c;便于网站的后期维护页面的精确…