通过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的详解。

相关推荐
Nan_Shu_6142 分钟前
学习:Sass
javascript·学习·es6
WYiQIU37 分钟前
面了一次字节前端岗,我才知道何为“造火箭”的极致!
前端·javascript·vue.js·react.js·面试
qq_3168377538 分钟前
uniapp 观察列表每个元素的曝光时间
前端·javascript·uni-app
小夏同学呀40 分钟前
在 Vue 2 中实现 “点击下载条码 → 打开新窗口预览 → 自动唤起浏览器打印” 的功能
前端·javascript·vue.js
芳草萋萋鹦鹉洲哦41 分钟前
【vue】导航栏变动后刷新router的几种方法
前端·javascript·vue.js
zero13_小葵司1 小时前
JavaScript性能优化系列(八)弱网环境体验优化 - 8.3 数据预加载与缓存:提前缓存关键数据
javascript·缓存·性能优化
1***y1781 小时前
Vue项目性能优化案例
前端·vue.js·性能优化
Irene19911 小时前
FileList 对象总结(附:不支持迭代的类数组对象表)
javascript·类数组对象·filelist·不支持迭代
谢尔登1 小时前
【CSS】样式隔离
前端·css
百***58842 小时前
Redis 通用命令
前端·redis·bootstrap