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
        })
    },

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

webpack5_相关知识点

webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler) ,是前端资源模块化管理和打包工具, 它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离,等到实际需要时…

Python 读取.shp文件并生成图幅编号

代码适用于需要处理和分析地理空间数据的场景,如城市规划、环境监测或自然资源管理,其中它可以帮助用户读取特定区域的Shapefile文件,确定其地理边界,并基于这些边界计算出按照经纬度5度间隔的图幅编号,进而用于地图制…

Hive环境搭建

1 安装Hive 下载文件 # wget -P /opt/ https://mirrors.huaweicloud.com/apache/hive/hive-2.3.8/apache-hive-2.3.8-bin.tar.gz 解压缩 # tar -zxvf /opt/apache-hive-2.3.8-bin.tar.gz -C /opt/ 修改hive文件夹名字 # mv /opt/apache-hive-2.3.8-bin /opt/hive 配置环境变量 …

力扣HOT100 - 138. 随机链表的复制

解题思路: class Solution {public Node copyRandomList(Node head) {if(headnull) return null;Node p head;//第一步,在每个原节点后面创建一个新节点//1->1->2->2->3->3while(p!null) {Node newNode new Node(p.val);newNode.next …

场景文本检测识别学习 day10(MMdetection)

配置文件(config) 由于在大型项目中,一种模型需要分:tiny、small、big等很多种,而它们的区别主要在网络结构,数据的加载,训练策略等,且差别很多都很小,所以如果每个模型都手动从头写一份&#…

文生图模型演进:AE、VAE、VQ-VAE、VQ-GAN、DALL-E 等 8 模型

节前,我们星球组织了一场算法岗技术&面试讨论会,邀请了一些互联网大厂朋友、参加社招和校招面试的同学。 针对算法岗技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何准备、面试常考点分享等热门话题进行了深入的讨论。 合集&#x…

【强训笔记】day24

NO.1 思路:递归。 代码实现: class Solution { public:bool IsBalanced_Solution(TreeNode* pRoot) {return dfs(pRoot)!-1;}int dfs(TreeNode* root){if(rootnullptr) return 0;int leftdfs(root->left);if(left-1) return -1;int rightdfs(root-…

如何使用甘特图来做任务管理?zz-plan甘特图的实践指南

在项目管理和任务调度中,甘特图是一种非常实用的工具,它可以帮助团队成员清晰地规划、执行和跟踪项目进度。然而,如何有效利用甘特图进行任务管理,对于许多团队来说仍然是一个挑战。本文将结合 zz-plan https://zz-plan.com/ 甘特…

jmeter服务器性能监控分析工具ServerAgent教程

ServerAgent介绍:支持监控CPU,memory,磁盘,网络等,和JMeter集成,在JMeter的图形界面中,可以实时看到监控的数据,但是,它只能监控硬件资源使用情况。 不能监控应用服务 S…

天若OCR 识别 (本地文字识别转换工具)

前言 天若OCR文字识别本地版是一款在天若OCR文字识别工具v5.0免费开源版的基础上采用Chinese-lite框架和Paddle-ocr框架本地化识别接口编译而成,无需联网也无需申请密钥,纯本地运算,识别准确度和速度很快,操作和天若OCR免费版一样&#xff0…

解决:error: failed to push some refs to ‘https://gitee.com/***/***.git‘(高效快速)

解决方案: git pull --rebase origin master 具体原因: 主要原因是gitee(github)中的README.md文件不在本地代码目录中 要执行git pull --rebase origin master命令将README.md拉到本地 然后就可以执行git push啦 写在最后: 要是问题得到…

实验四 网络的路径与连通性

文章目录 4.1 网络的路径与连通性第1关:路径与初始距离矩阵的构建第2关:由网络邻接矩阵求初始距离矩阵方法第3关:网络中任意两点的最短路径求解 4.2 网络连通性第1关:网络节点间的可达性判断第2关:邻接矩阵转换可达矩阵…

Java基础之 API 字符串

文章目录 API字符串String概述创建对象 java的内存模型java的常用方法(比较)练习 API 概念: APl(Application ProgrammingInterface): 应用程序编程接口 简单理解: API就是别人已经写好的东西,我们不需要自己编写,直接使用即可。 Java API: 指的就是J…

Ubuntu20.04安装ffmpeg,并捕获视频流

工控机:幻影峡谷 系统:Ubuntu20.04 摄像头:杰瑞微通环星光USB摄像头记录一下使用ffmpeg拉取视频流的原因:刚开始用的是ubuntu系统自带的 茄子 软件,但是视频流很卡(非常卡,基本上不能用&#xf…

springboot2+mybatis-plus+vue3创建入门小项目[学生管理系统]02[实战篇]

01学习篇 创建一个 vue 项目 创建这个新的文件夹 创建前端项目 eggbox 数据库 SQL CREATE DATABASE IF NOT EXISTS egg DEFAULT CHARACTER SET utf8 COLLATE utf8_bin; USE egg;CREATE TABLE stu (id INT AUTO_INCREMENT, -- 自增主键name VARCHAR(64) NOT NULL, -- 非空…

超级初始网络

目录 一、网络发展史 1、独立模式 2、局域网 LAN(Local Area Network) 3、广域网 WAN (Wide Area Network) 二、网络通信基础 1、IP地址:用于定位主机的网络地址 2、端口号:用于定位主机中的进程 3、网络协议 4、五元组 …

The First项目报告:解读ZK技术的跨链巨头Polyhedra Network

4 月 17 日,零知识证明(ZK)基础设施开发团队 Polyhedra Network与谷歌云达成战略合作,以响应 Web2 与 Web3 市场对于该技术日益增长的需求。双方将基于Polyhedra的尖端研究及专有算法通过谷歌云提供的零知识即服务向全球开发者开放…

基于LLM的优化器评测-非凸函数

基于LLM的优化器评测-非凸函数 目标函数测试结果测试代码测试日志 背景: ​ 很多时候我们需要为系统寻找最优的超参.比如模型训练,推理的量化等.本文尝试将LLM当成优化器,帮忙我们寻找最优的超参. 验证方法: 1.设计一个已知最优解的多项式,该多项式有3个变量(因为3个变量可以…

温故而知新-Spring篇【面试复习】

温故而知新-Spring篇【面试复习】 前言版权推荐温故而知新-Spring篇IOCAOP循环依赖springboot如果要对属性文件中的账号密码加密如何实现?SpringBoot的优点Spring Boot 的核心注解是哪个?它主要由哪几个注解组成的? 最后 前言 2023-7-31 15:…

MX Component基础使用(多点位读取,多点位写入)

步骤,先连接PLC,然后在填入对应的点位 D10 然后去读取。 using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.Linq;using System.Text;using System.Threading.Tasks;us…