element input组件自动失去焦点问题解决

最近在 Vue3 + ElementPlus 中,使用 el-input 组件时,如果设置了 v-model,那么在每次改变内容后后,input 会自动失去焦点,这样会导致用户无法输入多个字符。

element input

一、问题原因

如上图所示,配置项的 Name 和 Code 都是使用 el-input 组件 v-for 遍历渲染的,都绑定了 v-model,而 :key 绑定的是对应的 Code 值。
所以,当 Code 改变后,当前所在的节点 key 值也改变了,根据 Vue 的 diff 算法,key 值改变后会导致节点重新渲染,这也就会导致 Code 在每输入一个字符后,input 自动失去焦点。

二、解决方案

解决方案很简单,只需要将 :key 绑定的值改为 index 即可,因为 index 对于当前这一组节点是不变的。

代码演示:

<template><divv-for="(item, index) in form.config":key="index"class="flex items-center mb-5px p-10px pl-50px"><div class="m-5px color-#999">Name:</div><el-input class="w-139px" v-model="item.value" placeholder="请输入" /><div class="color-#999 m-5px">Code:</div><el-input class="w-139px" v-model="item.key" placeholder="请输入" /><el-button@click="delConfig({ ...item, index })"linkclass="ml-10px":disabled="form.config.length <= 1"><el-icon size="16" color="#409eff"><IEpDelete /></el-icon></el-button><el-buttonlinkclass="ml-10px"v-if="form.config.length - 1 === index"@click="addConfig"><el-icon size="16" color="#409eff"><IEpPlus /></el-icon></el-button></div>
</template>

欢迎访问:天问博客

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

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

相关文章

VSCode使用技巧

选择python 解释器 使用快捷键CtrlShiftP Python: Select Interpreter快捷键 返回上一次光标的位置 重新设置一下 navigate

jmeter分布式服务搭建

目录 一、环境准备 二、 安装包下载 三 、安装jdk 四 、控制机安装 4.1 解压压缩包 4.2 修改 bin/jmeter.properties 4.3 修改 bin/system.properties 五、执行机安装 5.1 解压安装包 5.2 修改 bin/jmeter.properties 5.3 修改 bin/system.properties 5.4 启动执行机 …

记录el-select+el-tree复选框,支持模糊查询,懒加载,树父子节点不关联,不全选

需求&#xff1a;一个机构下拉菜单&#xff0c;一个人员下拉菜单&#xff0c;默认带入当前登录用户的机构和人员。机构下拉菜单为两个接口&#xff0c;模糊查询为一个接口不包含懒加载&#xff0c;默认非模糊查询情况下为一个接口&#xff0c;点击节点懒加载。机构下拉菜单数据…

NACHI机器人虚拟示教器报I2101异常

前言 机器人示教器报&#xff1a;I2101 异常停止按钮或外部停止信号被输入 无法再示教模式下进行程序的运行&#xff01; 解决方法 结果 最后测试可以正常的运行程序

细说DMD芯片信号-DLP3

1&#xff0c; Block diagram 2. 信号介绍 2.1, LS interface&#xff1a; LD_Data_P/N(i), LD_CLK_P/N(i), LS_RDATA_A_BIST(O) 2.2, 视频信号: HSSI(High speed serial interface) High speed Differential Data pair lan A0~7 P/N, High speed Differential Clock A High…

如何使用人工智能优化 DevOps?

DevOps 和人工智能密不可分&#xff0c;影响着各种业务。DevOps 可以加快产品开发速度并简化现有部署的维护&#xff0c;而 AI 则可以改变整个系统的功能。DevOps团队可以依靠人工智能和机器学习来进行数据集成、测试、评估和发布系统。更重要的是&#xff0c;人工智能和机器学…

uniapp 微信小程序跳转至其他小程序

一、背景&#xff1a; 需要在目前的小程序中跳转到另一个小程序&#xff0c;跳转的目标小程序需要已经发布上线了 二、具体实现 使用uni.navigateToMiniProgram打开另一个小程序 官网指引&#x1f449;&#xff1a;uni.navigateToMiniProgram(OBJECT) | uni-app官网 <t…

IDEA中明明代码没有报错,运行也不报错,但是代码却爆红了,重启idea,重启电脑,重新加载Maven都没有用

报错示图&#xff1a; 报错类是存在的 我的解决办法是修改类名&#xff0c;修改类名时会有提示&#xff0c;如下图&#xff1a; 然后点击报错的地方可以看到是哪些位置引用了 改回正确的类名 正常显示

酚醛胶面建筑模板 — 广西厂家直销,质保可靠

在现代建筑行业中&#xff0c;选择高质量的建筑板材对于确保施工质量和工程安全至关重要。广西厂家直销的酚醛胶面建筑板&#xff0c;以其卓越的质量和可靠的质保&#xff0c;成为了建筑行业的优选材料。 产品特性 卓越的耐候性&#xff1a;我们的酚醛胶面建筑板采用高品质酚醛…

Keras实现seq2seq

概述 Seq2Seq是一种深度学习模型&#xff0c;主要用于处理序列到序列的转换问题&#xff0c;如机器翻译、对话生成等。该模型主要由两个循环神经网络&#xff08;RNN&#xff09;组成&#xff0c;一个是编码器&#xff08;Encoder&#xff09;&#xff0c;另一个是解码器…

MC-4/11/10/400​什么是电机驱动器。​

MC-4/11/10/400​什么是电机驱动器。​ 首先&#xff0c;我们先来了解以下两个主题&#xff0c;这会帮助我们了解什么是电机驱动器。 电机驱动器IC的作用 电机驱动器IC与电机设备之间的关系 电机驱动器的作用 用来使电机旋转&#xff08;驱动电机&#xff09;的集成电路&…

R语言【paleobioDB】——pbdb_collections():通过参数选择,返回多个采集号的基本信息

Package paleobioDB version 0.7.0 paleobioDB 包在2020年已经停止更新&#xff0c;该包依赖PBDB v1 API。 可以选择在Index of /src/contrib/Archive/paleobioDB (r-project.org)下载安装包后&#xff0c;执行本地安装。 Usage pbdb_collections (...) Arguments 参数【...…

云防护概念及云防护作用

云防护是什么 云防护是一种网络安全技术&#xff0c;旨在保护云计算环境中的数据和系统免受恶意攻击和未授权访问。 云防护适用场景 一切http.https.tcp协议&#xff0c;如游戏、电商、金融、物联网等APP PC 网站。 云防护的主要作用 云防护的主要作用是通过搭规模庞大的云防…

STM32存储左右互搏 SPI总线读写FRAM MB85RS2M

STM32存储左右互搏 SPI总线读写FRAM MB85RS2M 在中低容量存储领域&#xff0c;除了FLASH的使用&#xff0c;&#xff0c;还有铁电存储器FRAM的使用&#xff0c;相对于FLASH&#xff0c;FRAM写操作时不需要预擦除&#xff0c;所以执行写操作时可以达到更高的速度&#xff0c;其…

数字后端设计实现之自动化useful skew技术(Concurrent Clock Data)

在数字IC后端设计实现过程中&#xff0c;我们一直强调做时钟树综合要把clock skew做到最小。原因是clock skew的存在对整体设计的timing是不利的。 但是具体到某些timing path&#xff0c;可能它的local clock skew对timing是有帮助的&#xff0c;比如如下图所示。 第一级FF到第…

搭建Eureka服务注册中心

一、前言 我们在别的章节中已经详细讲解过eureka注册中心的作用&#xff0c;本节会简单讲解eureka作用&#xff0c;侧重注册中心的搭建。 Eureka作为服务注册中心可以进行服务注册和服务发现&#xff0c;注册在上面的服务可以到Eureka上进行服务实例的拉取&#xff0c;主要作用…

LeetCode[105] 从前序与中序遍历序列构造二叉树

给定两个整数数组 preorder 和 inorder &#xff0c;其中 preorder 是二叉树的先序遍历&#xff0c; inorder 是同一棵树的中序遍历&#xff0c;请构造二叉树并返回其根节点。 示例 1: 输入: preorder [3,9,20,15,7], inorder [9,3,15,20,7] 输出: [3,9,20,null,null,15,7] …

为什么推荐大家使用动态住宅ip?怎么选择?

代理ip的类型有很多&#xff0c;本文来介绍什么是动态住宅ip&#xff0c;为什么很多博主都推荐使用动态住宅ip&#xff0c;他到底有什么好处呢&#xff0c;接下来我们来学习一下。 一、什么是动态住宅ip 网络上的代理供应商很多&#xff0c;通常我们接触的比较多的几种类型有…

Ubuntu下Lighttpd服务器安装,并支持PHP

1、说明 Lighttpd 是一个德国人领导的开源Web服务器软件&#xff0c;其根本的目的是提供一个专门针对高性能网站&#xff0c;安全、快速、兼容性好并且灵活的web server环境。具有非常低的内存开销、cpu占用率低、效能好以及丰富的模块等特点。 Lighttpd是众多OpenSource轻量级…

模型评估:Holdout、交叉检验、自助法

机器学习中&#xff0c;我们通常把样本分为训练集和测试集&#xff0c;训练集用于训练模型&#xff0c;测试集用于评估模型。在样本划分和模型验证的过程中&#xff0c;存在着不同的抽样方法和验证方法。 1. 在模型评估过程中&#xff0c;有哪些主要的验证方法&#xff0c;它们…