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

news2024/11/25 15:56:21

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.coloradmin.cn/o/1709309.html

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

相关文章

淘宝扭蛋机小程序:探索未知,扭出惊喜

在数字时代,我们一直在寻找一种新颖、有趣且充满惊喜的购物方式。淘宝扭蛋机小程序正是为了满足这一需求而诞生的创新之作,它将传统扭蛋机的乐趣与淘宝的丰富商品库完美结合,为您带来前所未有的购物体验。 打破传统,创新玩法 淘…

仅1天录用!3天见刊!这本毕业“水刊”,全科都收,极速上线!

【欧亚科睿学术】 01 期刊简介 【期刊类别】计算机工程类EI 【期刊简介】最新EI期刊目录内源刊 【版面情况】仅10篇版面 【审稿周期】预计2-4周左右录用 【检索情况】EI&Scopus双检 【征稿领域】计算机工程领域相关稿件均可。 02 征稿领域 该期刊发表有关计算机在各…

面试二十六、c++语言级别的多线程编程

一、 多线程编程 ​​​​​ 这里的c语言级别的多线程和linux的有一定的区别,c语言级别提供的多线程比较严格,如果主线程结束了,但是子线程没有结束,进程就会异常终止,而linux不会,会继续执行。 二、模拟卖…

ComfyUI工作流网站

https://openart.ai/home https://comfyworkflows.com/ https://civitai.com/

《java数据结构》--栈的详解

一.栈的认识 栈是一种不同于链表和顺序表的储存数据结构,它对存储数据和取出数据有着特殊的要求🤔。 首先栈只能从一端存储数据,也就是从一端进,还从这一端出这也是栈最大的特点,这也导致在栈中存取数据都必须遵循先…

【Linux】常用基础命令 | 搭建云服务器优化环境 | 程序的部署

文章目录 Linux常用命令及搭建环境一、LinuxLinux发行版 1.常用命令1.ls2.cd3.pwd4.touch5.cat6.echo7.vim8.mkdir9.rm10.mv11.cp12.man13.grep14.ps15.netstat 2.搭建Java Web程序的运行环境包管理器1.安装JDK2.安装Tomcat3.安装mysql 3.程序的部署 Linux常用命令及搭建环境 …

springcloud-服务拆分与远程调用

一 微服务 1.1简单了解 SpringCloud SpringCloud是目前国内使用最广泛的微服务框架。官网地址:Spring Cloud。 SpringCloud集成了各种微服务功能组件,并基于SpringBoot实现了这些组件的自动装配,从而提供了良好的开箱即用体验&#xff1a…

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

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

React18 apexcharts数据可视化之折线图

基础折线图 import ApexChart from react-apexcharts;export function Basic() {// 数据序列const series [{name: "Desktops",data: [10, 41, 35, 51, 49, 62, 69, 91, 148]},]// 图表选项const options {// 图表chart: {height: 650,type: line,zoom: {enabled:…

QT学习(20):QStyle类

Qt包含一组QStyle子类,这些子类(QWindowsStyle,QMacStyle等)模拟Qt支持的不同平台的样式,默认情况下,这些样式内置在Qt GUI模块中,样式也可以作为插件提供。 Qt的内置widgets使用QStyle来执行几…

基于vuestic-ui实战教程 - 页面篇

1. 简介 前面介绍了基本的内容比如如何获取动态数据,下面就到登录进来后的页面实现了,相信各位读者或多或少都有 element-uijs 的实战经历,那么 vuestic-uits 实现的页面又该如何写呢?带着疑问开启今天的学习(声明由于…

【个人博客搭建】(20)获取操作用户信息(IHttpContextAccessor)

IHttpContextAccessor在ASP.NET Core中扮演着至关重要的角色。它为开发者提供了一种方便的方式来访问和操作HttpContext对象,从而允许在整个应用程序中轻松地管理和使用HTTP请求和响应的相关信息。下面将深入探讨IHttpContextAccessor的作用、使用方法以及如何通过它…

Round-Robin 调度逻辑算法

Round-Robin 调度逻辑算法 1 Intro1.1 固定优先级1.2 Round-Robin算法 之前上学还是工作,都接触过调度算法:Round-Robin和weight-Round Robin算法,但只知道它的功能和目的是什么,没有具体了解如何实现的; 现在是工作上…

【漏洞复现】用友NC registerServlet JNDI 远程代码执行漏洞(XVE-2024-10248)

0x01 产品简介 用友NC是 用友软件股份有限公司开发的一套企业级管理软件系统。它是一个基于互联网的多层应用系统,旨在为中大型企业提供全面、集成的管理解决方案。是一种商业级的企业资源规划云平台,为企业提供全面的管理解决方案,包括财务…

什么情况下JVM内存中的一个对象会被垃圾回收?

什么情况下JVM内存中的一个对象会被垃圾回收? 1、什么时候会触发垃圾回收?2、被哪些变量引用的对象是不能回收的?3、Java中对象不同的引用类型4、finalize()方法的作用1、什么时候会触发垃圾回收? 平时我们系统运行创建的对象都是优先分配在新生代里的,如图: 然后如果…

技术驱动未来,全面揭秘 Sui 的生态发展和布局

在不到一年的时间里,由 Mysten Labs 团队创立的 Layer1 区块链 Sui 迅速崛起,成功跃升至去中心化金融(DeFi)的前十名。根据 DeFi Llama 的数据,Sui的总锁定价值(TVL)在短短四个月内增长超过 100…

java第十八课 —— 重载、可变参数

方法重载 基本介绍 java 中允许同一个类中,多个同名方法的存在,但要求形参列表不一致! 比如:System.out.println(); out 是 PrintStream 类型 重载的好处 减轻了起名的麻烦减轻了记名的麻烦 注意事项和使用细节 方法名&…

登录记住密码背景颜色修改

1,在login.vue中&:-webkit-autofill里面的css替换成如下 &:-webkit-autofill {box-shadow: 0 0 0px 1000px $bg inset !important;-webkit-text-fill-color: $cursor !important;}

scp问题:Permission denied, please try again.

我把scp归纳三种情况: 源端root——》目标端root 源端root——》目标端mysql(任意)用户 源端(任意用户)——》目标端root用户 在scp传输文件的时候需要指导目标端的用户密码,如root用户密码、mysql用户…

拖线无人机技术:像风筝一样飞行,无人能干扰

拖线无人机技术是一种独特且高效的无人机应用技术,其设计理念源于风筝。这种无人机不仅能够在空中稳定飞行,而且具备极强的抗干扰能力,使其在各种复杂环境下都能保持通信畅通和任务执行的高效。 拖线无人机技术的核心在于其拖线系统。与传统的…