el-input 每次输入后都会失去焦点

Question

el-input每次输入后都会失去焦点

vue 项目中使用 element-ui , 有一个表单中需要根据条件渲染不同的 item 和 input ,因为不是在循环中,又怕发生标签的复用,所以 key 属性设置了 Math.random()。没想到 input 输入后出现了失去焦点的问题。
尝试搜索此问题是否有人提出和已有回答, 得到的解答是说问题根源是因为 dom 发生了重绘。但是发生重绘的原因有人说是因为 if 判断,有人说是 onchange 事件引起。
多次测试得知是 onchange 后因为 key 值的问题造成的重绘,以此记录问题。

相关错误代码

<el-form-item
  v-if="albumType==1"
  label="操作原因"
  :key="Math.random()"
  prop="albumPurchaseCustomReason"
>
  <el-input type="textarea" v-model="album.albumPurchaseCustomReason"></el-input>
</el-form-item>
<el-form-item v-else label="操作原因" :key="Math.random()" prop="albumReturnCustomReason">
  <el-input type="textarea" v-model="album.albumReturnCustomReason"></el-input>
</el-form-item>

问题解决后的代码

<el-form-item
  label="操作原因"
  :key="1"
  :prop="albumType==1?'albumPurchaseCustomReason':'albumReturnCustomReason'"
>
  <el-input v-if="albumType==1" type="textarea" v-model="album.albumPurchaseCustomReason"></el-input>
  <el-input v-else type="textarea" v-model="album.albumReturnCustomReason"></el-input>
</el-form-item>

Answer 1

已解决问题
解决过程在以上文中