修复 Element Plus input组件失去焦点的问题

问题描述

ElementUI Plus中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>
// 使用另一个变量是最容易的解决办法