当前位置: 首页 > news >正文

通过v-for生成的input无法连续输入

在这里插入图片描述
部分代码:通过v-for循环生成el-form-item,生成多个描述输入框

更改之前的代码(key绑定的是item):

<el-form-item class="forminput" v-for="(item,index) in formdata.description" :key="item" :label="'描述'+(index+1)" prop="description"><el-input v-model="formdata.description[index]"></el-input><el-button type="primary" icon="el-icon-plus" circle @click="adddescritpion"></el-button>
</el-form-item>

解决方案:将key绑定为index。
原因:key 的问题,因为 :key 和输入的内容绑定,被反复重置为新的 input,导致input每当输入后就会是去焦点,产生无法连续输入的情况。

注意:key绑定为index不是一个较好的解决方案,会导致渲染的效率变低,详情见v-for中key的详解。

http://www.lryc.cn/news/98950.html

相关文章:

  • Ventoy 使用教程图文详细版
  • 脚手架 --- command框架<一>
  • SpringBoot整合Zookeeper
  • Java和C#选哪个?
  • 首批!棱镜七彩通过汽车云-汽车软件研发效能成熟度模型能力评估
  • 【Docker】容器的数据卷
  • CentOS7安装jenkins
  • Hadoop的伪分布式安装方法
  • iOS 应用上架的步骤和工具简介
  • 【信号去噪】基于马氏距离和EDF统计(IEE-TSP)的基于小波的多元信号去噪方法研究(Matlab代码实现)
  • 智驾SOC shell编程应用实战笔记
  • C#实现计算题验证码
  • 【lesson6】Linux下:第一个小程序,进度条代码
  • PostgreSQL实战-pg13主从复制切换测试
  • 如何使用OpenCV库进行图像检测
  • Mybatis中where 1=1 浅析
  • element中el-input组件限制输入条件(数字、特殊字符)
  • 会议OA项目之会议发布(一)
  • 【Android】对象为null的一个原因:在方法内部,重新创建了一个新的对象并将其赋值给原对象,但这并不会改变原始的原对象的引用
  • macbook 软件iMovie for Mac(专业视频剪辑工具)中文版
  • web APIs-练习一
  • AX88179A千兆网卡芯片,支持switch联网
  • Pytorch个人学习记录总结 05
  • windows部署安装redis安装教程
  • Jmeter post请求传参问题
  • 对Windows应用程序进行代码签名
  • 2022 China Open Source Report
  • postgresql|数据库|启动数据库时报错:FATAL: could not map anonymous shared memory的解决
  • 数字签名与数字证书
  • 基于Jquery EasyUI JSZip FileSaver的简单使用