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输入可连续输入，不会被重新渲染。