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輸入可連續輸入，不會被重新渲染。