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

相关推荐
IT_陈寒7 分钟前
Element Plus 2.10.0 重磅发布!新增Splitter组件
前端·人工智能·后端
挑战者6668887 分钟前
vue入门环境搭建及demo运行
前端·javascript·vue.js
贩卖纯净水.8 分钟前
Webpack的基本使用 - babel
前端·webpack·node.js
用户8820932166742 分钟前
Vue组件通信全攻略:从父子传参到全局状态管理,一篇搞定!
前端
Canmick1 小时前
JavaScript 异步函数健身操
前端·javascript
一曝十寒1 小时前
那些常见的 HTTP 状态码
前端·http
WildBlue1 小时前
🚀 React初体验:从“秃头程序员”到“数据魔法师”的奇幻漂流
前端·react.js
JosieBook1 小时前
【Web应用】若依框架:基础篇14 源码阅读-后端代码分析-课程管理模块前后端代码分析
前端
前端小嘎1 小时前
被大厂裁员后做的前端工具网站
前端
超级土豆粉1 小时前
CSS 预处理器与工具
前端·css