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

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

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

html 复制代码
<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的详解。

相关推荐
Dontla2 分钟前
Webpack DefinePlugin插件介绍(允许在编译时创建JS全局常量,常量可以在源代码中直接使用)JS环境变量
运维·javascript·webpack
酷爱码1 小时前
css中的 vertical-align与line-height作用详解
前端·css
沐土Arvin1 小时前
深入理解 requestIdleCallback:浏览器空闲时段的性能优化利器
开发语言·前端·javascript·设计模式·html
专注VB编程开发20年1 小时前
VB.NET关于接口实现与简化设计的分析,封装其他类
java·前端·数据库
小妖6661 小时前
css 中 content: “\e6d0“ 怎么变成图标的?
前端·css
L耀早睡2 小时前
mapreduce打包运行
大数据·前端·spark·mapreduce
咖啡の猫2 小时前
JavaScript基础-创建对象的三种方式
开发语言·javascript·ecmascript
HouGISer2 小时前
副业小程序YUERGS,从开发到变现
前端·小程序
outstanding木槿2 小时前
react中安装依赖时的问题 【集合】
前端·javascript·react.js·node.js
小吕学编程3 小时前
Jackson使用详解
java·javascript·数据库·json