antdesignvue使⽤过程中遇到的问题总结(⼆)之input值改变
输⼊框失去焦点
input值改变输⼊框失去焦点
antdesignvue 配置外部文件
在项⽬中,使⽤<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输⼊可连续输⼊,不会被重新渲染。