vue3中el-input无法获得焦点的问题

文章目录

    • 现象
    • 两次nextTick()加setTimeout()解决
    • 结论

现象

el-input被外层div包裹了,设置autofocus不起作用:

<el-dialog v-model="visible" :title="title" :append-to-body=true width="50%">
    <el-form v-model="theForm" @submit.prevent="submit">
      <el-form-item v-for="item in formItems" :label="item.label" :label-width="120">
        <el-input v-model="theForm[item.name]" ref="inputRef"
          autocomplete="off"           
          @keyup.enter.stop="submit"
          autofocus/>
      </el-form-item>
    </el-form>
    <template #footer>
        <span>
          <el-button type="primary" @click="cancel()">取消</el-button>
          <el-button type="primary" @click="submit()">确定</el-button>
        </span>
    </template>
  </el-dialog>

在onMounted()中尝试: inputRef.value.focus(),也无效。怀疑是调用时机不对,但何时才是页面dom都生成好的时机呢?

两次nextTick()加setTimeout()解决

// 需要调用两次nextTick才能获得实例!!!
const focusInput = () => { nextTick(() => 
  nextTick(()=>{    
    setTimeout(function () {
      let _eles = document.querySelectorAll('form input.el-input__inner')
      // console.log(_eles)
      _eles[0].focus()
      // inputRef.value.focus()
    }, 100);
    
  }))}

onMounted(() => {
  focusInput()
})

结论

在vue3组件嵌套复杂时,很难确定组件之间的初始化顺序,这时尽可能让访问时机靠后是一个通用的解决方法。

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

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

相关文章

AI安全最佳实践:AI云原生开发安全评估矩阵(下)

上篇小李哥带大家一起了解了什么是AI应用云原生开发安全评估矩阵&#xff0c;并且介绍了利用该矩阵如何确定我们云上AI应用的安全评估范围&#xff0c;接下来我们将继续本系列的下篇&#xff0c;基于该安全评估矩阵设计和实施我们系统应具备的安全控制。 优先考虑的安全控制 …

新星杯进化史:个人发起到CSDN官方支持,创作活动的新篇章

❤️作者主页&#xff1a;小虚竹 ❤️作者简介&#xff1a;大家好,我是小虚竹。2022年度博客之星&#x1f3c6;&#xff0c;Java领域优质创作者&#x1f3c6;&#xff0c;CSDN博客专家&#x1f3c6;&#xff0c;华为云享专家&#x1f3c6;&#xff0c;掘金年度人气作者&#x1…

jjwt -- Token 生成解析技术指南

引言 JWT&#xff08;JSON Web Token&#xff09;是一种基于JSON的、用于双方之间安全传输信息的简洁的、URL安全的令牌标准。在现代Web应用程序中&#xff0c;JWT作为一种高效且安全的认证机制&#xff0c;被广泛应用于用户身份验证和信息交换场景。本文旨在详细介绍JWT Toke…

第 2 天:创建你的第一个 UE5 C++ 项目!

&#x1f3af; 目标&#xff1a; 掌握 UE5 C 项目的创建流程&#xff0c;了解代码结构&#xff0c;并成功运行第一个 C 类&#xff01; 1️⃣ 创建 UE5 C 项目 在 UE5 中&#xff0c;C 项目可以与蓝图&#xff08;Blueprint&#xff09;结合使用&#xff0c;让游戏逻辑更灵活…

RabbitMQ 从入门到精通:从工作模式到集群部署实战(二)

接上篇&#xff1a;《RabbitMQ 从入门到精通&#xff1a;从工作模式到集群部署实战&#xff08;一&#xff09;》 链接 文章目录 4.安装RabbitMQ Messaging Topology Operator 裸金属环境部署RabbitMQ部署单实例部署集群 4.安装RabbitMQ Messaging Topology Operator 使用 cer…

vs code 使用教程

一、定义 多行注释vs 找不到上层文件路径选择 或 创建python 虚拟环境git 远程克隆及推送vs code 文件路径vs 使用tensorboard 二、使用 学习网站&#xff1a;https://learn.microsoft.com/zh-cn/visualstudio/python/?viewvs-2022性能分析&#xff1a;https://learn.micros…

【Elasticsearch】terms聚合误差问题

Elasticsearch中的聚合查询在某些情况下确实可能存在误差&#xff0c;尤其是在处理分布式数据和大量唯一值时。这种误差主要来源于以下几个方面&#xff1a; 1.分片数据的局部性 Elasticsearch的索引通常被分成多个分片&#xff0c;每个分片独立地计算聚合结果。由于数据在分…

BUU22 [护网杯 2018]easy_tornado 1

打开题目以后出现三个文件&#xff0c;查看源代码&#xff0c;突破口在于这三个文件都有特殊的格式 python的tornado漏洞 Tornado 是一个用 Python 编写的 Web 框架&#xff08;和flask一样&#xff0c;只不过flask是轻量级的&#xff0c;而tornado可以处理高流量&#xff09…

QT修仙之路1-1--遇见QT

文章目录 遇见QT二、QT概述2.1 定义与功能2.2 跨平台特性2.3 优点汇总 三、软件安装四、QT工具介绍(重要)4.1 Assistant4.2 Designer4.3 uic.exe4.4 moc.exe4.5 rcc.exe4.6 qmake4.7 QTcreater 五、QT工程项目解析(作业)5.1 配置文件&#xff08;.pro&#xff09;5.2 头文件&am…

寒假2.5

题解 web:[网鼎杯 2020 朱雀组]phpweb 打开网址&#xff0c;一直在刷新&#xff0c;并有一段警告 翻译一下 查看源码 每隔五秒钟将会提交一次form1&#xff0c;index.php用post方式提交了两个参数func和p&#xff0c;func的值为date&#xff0c;p的值为Y-m-d h:i:s a 执行fu…

计算机中数值表示:原码、反码、补码与移码

1 前言 计算机科学中&#xff0c;数字的表示方式至关重要&#xff0c;因为计算机内部只能识别处理二进制数据。为了在计算机中实现对整数的表示&#xff0c;提出了多种数值编码方式&#xff0c;其中最常用的是原码、反码、补码和移码。 2 原码 2.1 原码的定义 原码(Signed …

硬件实现I2C常用寄存器简单介绍

引言 在深入探讨I2C外设的具体案例之前&#xff0c;理解其核心寄存器的配置至关重要。这些寄存器不仅控制着I2C模块的基本操作模式&#xff0c;如数据传输速率和地址识别&#xff0c;还负责管理更复杂的通信需求&#xff0c;例如中断处理、DMA交互及错误检测与恢复。接下来的内…

分析用户请求K8S里ingress-nginx提供的ingress流量路径

前言 本文是个人的小小见解&#xff0c;欢迎大佬指出我文章的问题&#xff0c;一起讨论进步~ 我个人的疑问点 进入的流量是如何自动判断进入iptables的四表&#xff1f;k8s nodeport模式的原理&#xff1f; 一 本机环境介绍 节点名节点IPK8S版本CNI插件Master192.168.44.1…

linux中,软硬链接的作用和使用

一、软硬链接的作用 软硬链接&#xff0c;是大家所熟系的内容了。链接就是方便人使用电脑上访问文件、方便进程访问文件的工具。比如软连接大家都有见过&#xff0c;在安装某款软件的时候要不要添加快捷方式。在windows系统上&#xff0c;我们右键点击文件的时候按‘s’就能创建…

kalman滤波器C++设计仿真实例第三篇

1. 仿真场景 水面上有条船在做匀速直线航行&#xff0c;航行过程中由于风和浪的影响&#xff0c;会有些随机的干扰&#xff0c;也就是会有些随机的加速度作用在船身上&#xff0c;这个随机加速度的均方差大约是0.1&#xff0c;也就是说方差是0.01。船上搭载GPS设备&#xff0c;…

ubuntu20.04+RTX4060Ti大模型环境安装

装显卡驱动 这里是重点&#xff0c;因为我是跑深度学习的&#xff0c;要用CUDA&#xff0c;所以必须得装官方的驱动&#xff0c;Ubuntu的附件驱动可能不太行. 进入官网https://www.nvidia.cn/geforce/drivers/&#xff0c;选择类型&#xff0c;最新版本下载。 挨个运行&#…

[c语言日寄]浮点数在内存中的储存

【作者主页】siy2333 【专栏介绍】⌈c语言日寄⌋&#xff1a;这是一个专注于C语言刷题的专栏&#xff0c;精选题目&#xff0c;搭配详细题解、拓展算法。从基础语法到复杂算法&#xff0c;题目涉及的知识点全面覆盖&#xff0c;助力你系统提升。无论你是初学者&#xff0c;还是…

Yageo国巨的RC系列0402封装1%电阻库来了

工作使用Cadence多年&#xff0c;很多时候麻烦的就是整理BOM&#xff0c;因为设计原理图的时候图省事&#xff0c;可能只修改value值和封装。 但是厂家&#xff0c;规格型号&#xff0c;物料描述等属性需要在最后的时候一行一行的修改&#xff0c;繁琐又容易出错&#xff0c;过…

【文档智能】Qwen2.5-VL在版式分析和表格识别上的实际评测效果

qwen开年开源了Qwen2.5-VL系列权重模型&#xff0c;笔者观察到相较于传统的多模态系列&#xff0c;增加了文档理解功能。笔者以文档智能中两个比较重要的任务版式分析和表格识别&#xff0c;笔者直接测试下Qwen2.5-VL-72B的效果。 版式分析 case1 case2 这个case没有输出bbox…

【计算机组成原理】1_绪论

chap1 绪论 1. 国产芯片现状 MIPS阵营&#xff1a;龙芯X86阵营&#xff08;常见于桌面和服务器&#xff09;&#xff1a;兆芯&#xff08;VIA&#xff09;&#xff0c;海光&#xff08;AMD&#xff09;ARM阵营&#xff08;常见于移动嵌入式、手机平板等&#xff09;&#xff…