# 问题描述
elementUi中input输入字符光标在输入一个字符后,光标就退出,无法输入需要再次聚焦然后输入一个字符又再次退出。
# 分析
首先,用Element Plus正常用v-model绑定输入的值是不会造成光标退出的,原因是修改了list数据,导致光标输入,数据刷新,导致el-form重绘,光标失去焦点
/**
list = [
{
key: '',
value: ''
},
{
key: '',
value: ''
}
]
*/
<el-form v-for="item in list" :key="item.key">
<el-form-item label="键">
<el-input v-model="item.key"></el-input>
</el-form-item>
<el-form-item label="值">
<el-input v-model="item.value"></el-input>
</el-form-item>
</el-form>
// 问题就在 :key="item.key" input绑定的 item.key 修改后 刷新了list数据
# 解决办法
<el-form v-for="(item, index) in list" :key="item.key">
<el-form-item label="键">
<el-input v-model="data[index].key"></el-input>
</el-form-item>
<el-form-item label="值">
<el-input v-model="data[index].value"></el-input>
</el-form-item>
</el-form>
// 使用另一个变量是最容易的解决办法