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.rhkb.cn/news/334815.html

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

相关文章

YoloV8实战:各种图绘制汇总(mAP50、mAP50-95、loss、PR_curve、F1_curve)|科研必备|绘图神器

摘要 本文的内容是告诉大家如何绘制mAP50、mAP50-95、loss、PR_curve、F1_curve等图像,方便大家写论文。 绘制mAP50、mAP50-95、loss等图。 先上效果,如下图: 首先将,训练的result.csv汇总到一个文件夹下面(这样方便寻找),要不然找起来太麻烦。如下图: 我都放到re…

Aleth-NeRF: Illumination Adaptive NeRF with Concealing Field Assumption

Abstract Aleth-NeRF: 带有隐蔽场假设的照明自适应 NeRF 照明照明标准的神经辐射场(NeRF)范例采用了一种以观察者为中心的方法,将光照和材料反射的各个方面仅仅从3D 点发射纠缠在一起。这种简化的渲染方法在准确建模在不利光照条件下捕获的图像方面提出了挑战,如弱光或过度曝…

【Linux】LAMP集群分布式安全方案

LAMP集群分布式安全方案主要涉及确保Linux、Apache、MySQL和PHP(LAMP)组合构成的集群环境的安全性和稳定性。 本次实验通过网络层安全对防火墙配置:使用防火墙(如iptables或firewalld)来限制对集群的访问,只…

152.找出峰值(力扣)

代码解决 class Solution { public:// 函数用于找到山峰元素的索引vector<int> findPeaks(vector<int>& mountain) {vector<int> result; // 用于存储山峰元素的索引// 遍历数组&#xff0c;从第二个元素到倒数第二个元素for(int i 1; i 1 < mount…

【蓝桥杯】第十四届蓝桥杯大赛软件赛国赛C/C++ 大学 B 组

答题结果页 - 蓝桥云课 (lanqiao.cn) 0子2023 - 蓝桥云课 (lanqiao.cn)&#xff08;暴力枚举 #include<bits/stdc.h> using lllong long; using ullunsigned long long; #define fir first #define sec second //#define int llconst int N1e510; const int mod1e97;int…

opencascade V3d_PositionLight V3d_SpotLight 源码学习 (位置性)光源

Positional、Spot 和 Directional Light 类的基类。 类V3d_SpotLight 创造和修改光源的衰减因子 F 决定了表面的照明&#xff1a; F 1 / (ConstAttenuation() LinearAttenuation() * Distance) 其中 Distance 是从光源到表面的距离。默认值 (1.0, 0.0) 对应最小的衰减。浓…

pikachu—exec“eval“

这是原画面 然后呢&#xff1f; 我们知道会传入到后台rce_eval.php来处理然后通过 eval()是啥? 在eval括号里面可以执行外来机器的命令 然后我们通过php的一个内置的命令 我们通过phpinfo()&#xff1b; 这是输入后的结果

10、SpringBoot 源码分析 - 自动配置深度分析三

SpringBoot 源码分析 - 自动配置深度分析三 refresh和自动配置大致流程AutoConfigurationImportSelector的getAutoConfigurationEntry获取自动配置实体(重点)AutoConfigurationImportSelector的getCandidateConfigurations获取EnableAutoConfiguration类型的名字集合AutoConfig…

Golang | Leetcode Golang题解之第118题杨辉三角

题目&#xff1a; 题解&#xff1a; func generate(numRows int) [][]int {ans : make([][]int, numRows)for i : range ans {ans[i] make([]int, i1)ans[i][0] 1ans[i][i] 1for j : 1; j < i; j {ans[i][j] ans[i-1][j] ans[i-1][j-1]}}return ans }

[FlareOn6]Overlong

很简单的逻辑 一度让我以为是加保护了 运行告诉我从未编码,懵逼 动调你也发现,你根本没什么可以操作的空间,密文什么的,都是固定的 但是这里大家发现没 我们只加密了28个密文 然后text是128 也就是 0x80 是不是因为密文没加密完呢 我也懒得去写代码了 汇编直接修改push 字…

Leetcode621. 任务调度器

Every day a Leetcode 题目来源&#xff1a;621. 任务调度器 类似题目&#xff1a;1953. 你可以工作的最大周数 解法1&#xff1a;贪心 本质上来说&#xff0c;我们需要构造一个尽量短的&#xff0c;相同元素间隔 > (n1) 的序列。 用一个数组 cnt 统计每个任务的次数。…

03 FreeRTOS 同步互斥与通信

1、同步与互斥 一句话理解同步与互斥&#xff1a;我等你用完厕所&#xff0c;我再用厕所。 什么叫同步&#xff1f;就是&#xff1a;哎哎哎&#xff0c;我正在用厕所&#xff0c;你等会。 什么叫互斥&#xff1f;就是&#xff1a;哎哎哎&#xff0c;我正在用厕所&#xff0c;你…

Oracle中rman的增量备份使用分享

继上次使用RMAN的全量备份和异机还原以后&#xff0c;开始研究一下增量备份和还原的方法。相比于全量RMAN的备份还原&#xff0c;增量的备份还原就相对简单。本实践教程直接上操作&#xff0c;还是回归到一个问题&#xff0c;就是关于两个数据库创建时候&#xff0c;必须保持or…

效率工作:一键为多种资产添加统一材质(小插件)

1.需求分析&#xff1a; 当导入一批资产&#xff0c;或者有同一批结构体需要添加相同材质时&#xff0c;单独为每个模型都添加材质费时费力&#xff0c;有没有什么办法&#xff0c;能同时为多个资产添加材质。 2.操作实现 1.在网上找到了一款插件&#xff0c;经过验证&#xf…

基于模糊PID控制器的汽车电磁悬架控制系统simulink建模与仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 基于模糊PID控制器的汽车电磁悬架控制系统simulink建模与仿真。 2.系统仿真结果 上面的仿真结果是无控制器和LQG的对比&#xff0c;以及有控制器和LQG的对比仿真。 3.核心程…

go 微服务框架kratos使用中间件的方法

一、中间件的概念 在go语言中&#xff0c;中间件是一种用于处理http请求的开发模式&#xff0c;允许开发人员在请求到达处理程序之前或之后执行特定的操作&#xff0c;如日志记录、身份验证、错误处理等。 中间件通常是一个函数&#xff0c;它接收一个 http.Handler 作为参数…

HBase安装

安装HBase 提示&#xff1a;需要安装好hadoop和zookeeper 安装zookeeper可参考 一、确定HBase版本 去网站确认 https://hbase.apache.org/book.html#hadoop二、下载HBase安装包 去清华大学镜像站下载 https://mirrors.tuna.tsinghua.edu.cn/apache/hbase/三、安装HBase …

Apache、Nginx、IIS文件解析漏洞

目录 1、文件解析漏洞介绍 2、Apache相关的解析漏洞 &#xff08;1&#xff09;多后缀解析漏洞 &#xff08;2&#xff09;Apache配置问题 &#xff08;3&#xff09;换行符解析漏洞 &#xff08;4&#xff09;罕见后缀解析 3、Nginx相关的解析漏洞 &#xff08;1&…

SwiftUI初探

SwiftUI 虽然出现了好几年(1.0好像2019年出的&#xff0c;还有SPM也是同一年)&#xff0c;现在已经到从1.0到5.0&#xff0c;但受限于对系统的要求(最低iOS13.0,有的要求17.0及以上)&#xff0c;每个版本里面差异也很大&#xff0c;语法和Flutter 的Dart 比较像。空闲之余可以先…

视图【mysql数据库】

目录 一、视图的创建、查看、修改、删除 二、cascaded、local检查选项 cascaded和local的区别 三、视图的更新 四、视图的作用 一、视图的创建、查看、修改、删除 二、cascaded、local检查选项 上面的几句SQL中&#xff0c;我们虽然给视图插入了id 30的数据&#xff0c;但…