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

相关推荐
码哥DFS9 小时前
构造函数、实例对象、对象原型 ----三者关系
开发语言·javascript·原型模式
风骏时光牛马9 小时前
智能赋能型AI办公一体化系统架构
前端
满栀5859 小时前
vue动态路由效果
前端·javascript·vue.js·前端框架·vue
土豆~9 小时前
文件名没后缀就打不开:前端文件预览的内容嗅探改造
前端·状态模式
Euato_Key10 小时前
全栈视野学习Cookie——理解 Cookie 的本质
前端
前端开发呀10 小时前
我的 AI 终端配置清单
前端
敲代码的玉米C10 小时前
测试一直在写你的真实数据根
前端·人工智能·架构
jjw_zyfx11 小时前
css vue vite实现闪烁的呼吸效果
javascript·css·vue.js
执子念的飞鱼11 小时前
File Viewer 进入 2K 节点后,我更在意这 3 条回归
前端·typescript