vue3---inputRef.value.focus()报错Cannot read properties of null (reading ‘focus‘)

问题描述:点击编辑按钮,出现el-input框(el-input显示隐藏通过v-if控制)

  

<el-input ref="inputRef" v-if="isEdit" v-model="modelName"  @blur="isEdit = false" />
<el-button text class="btn-wrapper" v-show="!isEdit"><svg-icon @click="editModelName" icon-class="edit" />
</el-button>
const isEdit=ref(false)
const inputRef=ref(null)//编辑模型名称
const editModelName = () => {isEdit.value = true;inputRef.value.focus();
};

解决方法:方法1:添加nextTick函数,因为使用了v-if执行;

  nextTick(() => {editModelNameRef.value.focus();});

方法2:v-if替换为v-show

道理简单,却总是容易忽略,警戒!

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

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

相关文章

大模型学习与实践笔记(十三)

将训练好的模型权重上传到 OpenXLab 方式1&#xff1a; 先将Adapter 模型权重通过scp 传到本地&#xff0c;然后网页上传 步骤1. scp 到本地 命令为&#xff1a; scp -o StrictHostKeyCheckingno -r -P *** rootssh.intern-ai.org.cn:/root/data/ e/opencv/ 步骤2&#…

为什么时序逻辑电路会落后一拍?

1、时序逻辑电路落后一拍&#xff1f; FPGA初学者可能经常听到一句话&#xff1a;“时序逻辑电路&#xff0c;或者说用 < 输出的电路会延迟&#xff08;落后&#xff09;一个时钟周期。”但在仿真过程中经常会发现不符合这一“定律”的现象–明明是在仿真时序逻辑&#xff…

C#winform上位机开发学习笔记13-串口助手显示系统时间功能添加

1.功能描述 在上位机中显示系统的实时时间 2.代码部分 步骤1&#xff1a;添加文本框控件并设置参数 #此处注意将BackColor颜色修改为非Control&#xff0c;即可正常显示ForeColor颜色&#xff0c;否则该颜色不变&#xff0c;原因暂且不明。 步骤2&#xff1a;添加timer控件…

GC26E31S国产芯片可替代AM26LV31E/TI,适用于马达编码等产品上

众所周知AM26LV31E是一款具有三态输出的四路差分线路驱动器。该驱动器具有15kV ESD&#xff08;HBM和IEC61000-4-2&#xff0c;气隙放电&#xff09;和8kV ESD&#xff08;IEC61000-4-2&#xff0c;接触放电&#xff09;保护。该器件旨在满足TIA /EIA-422-B和ITU建议V.11驱动器…

Dify学习笔记-知识库(六)

1、知识库 大多数语言模型采用较为陈旧的训练数据&#xff0c;并且对每次请求的上下文有长度限制。例如 GPT-3.5 是基于 2021 年的语料进行训练的&#xff0c;且有每次约 4K Token 的限制。这意味着开发者如果想让 AI 应用基于最新的、私有的上下文对话&#xff0c;必须使用类…

SpringCloudConfig+SpringCloudBus+Actuator+Git实现Eureka关键配置属性热更新(全程不重启服务)

文章目录 前言1.痛点2.解决方案3.具体实现3.1搭建热配置服务3.2编写配置文件3.3搭建版本控制仓库3.4Eureka-Client引入以下依赖3.5Eureka-Client微服务编写以下配置bootstrap.yml提前加载3.6分别编写测试Controller3.7测试效果3.8下线场景压测 4.SpringCloudBus优化5.写到最后 …

springboot-mybatis项目

一、后端开发环境搭建 1、File->New->Projet 2选择 Spring Initializr &#xff0c;然后选择默认的 url 点击next 3勾选Spring Web、SQL模板&#xff0c;next 4点击finish&#xff0c;搭建完成 二 数据库 1 新建数据库 2 执行sql建表 SET NAMES utf8mb4; SET FOREIGN…

爬虫js逆向分析——x平台(实现)

爬虫js逆向分析——x平台&#xff08;实现&#xff09; &#xff08;仅供学习&#xff0c;本案例只是分析流程没有账号&#xff09;网址&#xff1a;https://xuexi.chinabett.com/ 1.分析请求包格式 打开控制台&#xff0c;并勾选保存日志&#xff0c;然后点击登录看发送了什…

外贸邮件群发软件有哪些?邮件群发的系统?

外贸邮件群发软件哪个比较好&#xff1f;外贸开发信软件推荐&#xff1f; 对于许多外贸企业来说&#xff0c;邮件营销是一种非常有效的推广方式。那么&#xff0c;外贸邮件群发软件就成为了必备的工具。蜂邮EDM将为你揭秘几款主流的外贸邮件群发软件&#xff0c;助你更好地开展…

linux安装docker(入门一)

环境&#xff1a;centos 7(linux) 网站 官网: https://docs.docker.com/ Docker Hub 网站: https://hub.docker.com/ 容器官方概述 一句话概括容器&#xff1a;容器就是将软件打包成标准化单元&#xff0c;以用于开发、交付和部署。 容器镜像是轻量的、可执行的独立软件包 &…

shell脚本——条件语句与循环语句

目录 一、条件语句 1、test命令测试条件表达式 2、整数数值比较 3、字符串比较 4、逻辑测试&#xff08;短路运算&#xff09; 5、双中括号 二、if语句 1、 分支结构 1.1 单分支结果 1.2 双分支 1.3 多分支 2、case 一、条件语句 条件测试&#xff1a;判断某需求是…

【原神游戏开发日志3】登录和注册有何区别?

版权声明&#xff1a; ● 本文为“优梦创客”原创文章&#xff0c;您可以自由转载&#xff0c;但必须加入完整的版权声明 ● 文章内容不得删减、修改、演绎 ● 本文视频版本&#xff1a;见文末 ● 相关学习资源&#xff1a;见文末 前言 ● 这是我们原神游戏开发日记的第三期 ●…

OpenHarmony—TypeScript到ArkTS约束说明

对象的属性名必须是合法的标识符 规则&#xff1a;arkts-identifiers-as-prop-names 级别&#xff1a;错误 在ArkTS中&#xff0c;对象的属性名不能为数字或字符串。通过属性名访问类的属性&#xff0c;通过数值索引访问数组元素。 TypeScript var x { name: x, 2: 3 };c…

计算机网络 第5章(运输层)

系列文章目录 计算机网络 第1章&#xff08;概述&#xff09; 计算机网络 第2章&#xff08;物理层&#xff09; 计算机网络 第3章&#xff08;数据链路层&#xff09; 计算机网络 第4章&#xff08;网络层&#xff09; 计算机网络 第5章&#xff08;运输层&#xff09; 计算机…

Windows10上使Git Bash支持rsync命令操作步骤

rsync命令是linux上常用的工具之一&#xff0c;用于远程以及本地系统中拷贝/同步文件和文件夹。 Windows Git Bash默认并不支持rsync&#xff0c;如下图所示&#xff1a; 使Git Bash支持rsync命令操作步骤&#xff1a; 1.从https://repo.msys2.org/msys/x86_64/ 下…

Docker镜像的创建

基于现有镜像创建 先用现有镜像创建启动容器 docker run 再进入容器进行内容更新 docker exec -it 最后提交成新的镜像 docker commit 然后将修改后的容器提交为新的镜像&#xff0c;需要使用该容器的 ID 号创建新镜像 进入容器可查看相关性能 基于本地模板创…

测试C#调用OpenCvSharp和ViewFaceCore从摄像头中识别人脸

学习了基于OpenCvSharp获取摄像头数据&#xff0c;同时学习了基于ViewFaceCore的人脸识别用法&#xff0c;将这两者结合即是从摄像头中识别人脸。本文测试测试C#调用OpenCvSharp和ViewFaceCore从摄像头中识别人脸&#xff0c;并进行人脸红框标记。   新建Winform项目&#xf…

如何选择便捷安全的黄金交易平台?

黄金交易平台的介绍 黄金交易平台是一个提供方便、安全的方式进行黄金交易的网上平台。 投资者可以通过这些平台进行黄金的买卖&#xff0c;参与黄金市场的投资活动。 这些平台提供了一个简单易用的界面&#xff0c;让投资者可以方便地进行交易操作。 选择合适的黄金交易平台…

C++ 设计模式之责任链模式

【声明】本题目来源于卡码网&#xff08;卡码网KamaCoder&#xff09; 【提示&#xff1a;如果不想看文字介绍&#xff0c;可以直接跳转到C编码部分】 【设计模式大纲】 【简介】 --什么是责任链模式&#xff08;第21种设计模式&#xff09; 责任链模式是⼀种行为型设计模式&am…

windows下git pull超时,ping不通github

报错 ssh: connect to host github.com port 22: Connection timed out fatal: Could not read from remote repository. Please make sure you have the correct access rights and the repository exists. 解决办法 修改hosts 最后加一行&#xff0c;文件位置&#xff1a;…