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

相关推荐
米饭不加菜21 分钟前
Typora 原生流程图语法完全指南(Flowchart.js)
前端·javascript·流程图
scan72426 分钟前
langgraphy条件边
前端·javascript·html
冰小忆1 小时前
类变量在继承场景下的初始化规则是怎样的?
java·前端·数据库
用户938515635071 小时前
《JS 对象知识地图:10 个小节,从字面量到原型链全覆盖》
javascript
YAwu111 小时前
JavaScript this 底层机制剖析
前端·javascript
tedcloud1231 小时前
wifi-densepose部署教程:构建无线人体感知系统
服务器·javascript·网络·typescript·ocr
用户852495071841 小时前
帮你搞清楚对付js里对象的小妙招^_^
javascript
你好潘先生2 小时前
让 AI 任务不丢进度:YeeroAI 后台续跑与全局快捷操作实践
前端·人工智能·后端
不好听6132 小时前
javascript中对象的简单了解
javascript