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

相关推荐
右子10 分钟前
微信小程序开发“闭坑”指南
前端·javascript·微信小程序
AGG_Chan10 分钟前
flutter专栏--深入了解widget原理
开发语言·javascript·flutter
冰镇生鲜11 分钟前
前端模拟 流式文本接口 打字机效果 mockStreamText
javascript
入秋23 分钟前
Three.js后期处理实战:噪点 景深 以及色彩调整
前端·javascript·three.js
Asort27 分钟前
JavaScript设计模式(七)——桥接模式:解耦抽象与实现的优雅之道
前端·javascript·设计模式
golang学习记29 分钟前
从0死磕全栈之Next.js 应用中的认证与授权:从零实现安全用户系统
前端
苏打水com35 分钟前
携程前端业务:在线旅游生态下的「复杂行程交互」与「高并发预订」实践
前端·状态模式·旅游
Darenm11136 分钟前
深入理解CSS BFC:块级格式化上下文
前端·css
Darenm1111 小时前
JavaScript事件流:冒泡与捕获的深度解析
开发语言·前端·javascript
渣哥1 小时前
不加 @Primary?Spring 自动装配时可能直接报错!
javascript·后端·面试