ant design vue 使用过程中遇到的问题总结(二)之input值改变输入框失去焦点


input值改变输入框失去焦点

在项目中,使用<a-input></a-input>组件时,遇到一个问题是:当在输入框输入值的,输入一个值就会失去焦点,即不能连续的输入。开始以为是change事件的问题,然后查了发现是因为循环的key的问题。

当key的值和input中的:value相等时,输入框的值改变时,那么key的值就会改变,key值改变那么就会被重新渲染。

<div v-for="item in list" :key="item.id">
  <template v-if="item.editable">
    <a-input :value="item.id" @change="handlerChange"/>
  </template>
  <template v-else>
    <div>{{item.id}}</div>
  </template>
</div>

  

解决方案:key应该是唯一的,不能随之input的值改变而改变。

<div v-for="(item,i) in list" :key="i">
  <template v-if="item.editable">
    <a-input :value="item.id" @change="handlerChange"/>
  </template>
  <template v-else>
    <div>{{item.id}}</div>
  </template>
</div>

  

结果:input输入可连续输入,不会被重新渲染。

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM