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

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>
阅读 3.4k
评论 2019-03-29 提问
    1 个回答

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

    评论 赞赏 2019-03-30
      撰写回答

      登录后参与交流、获取后续更新提醒