Vue3绑定string[]数组到v-model时输入框焦点丢失问题求助

原因 #

问题出在v-for的:key绑定值上——你用了数组元素myValue作为key。当输入框输入内容时，v-model会更新对应位置的数组元素值，也就是myValue发生了变化。Vue的虚拟DOM比对机制会判定这个列表项的key已改变，随即销毁旧的输入框组件并重新创建新的，直接导致输入框刚输入一个字符就失去焦点。

解决方法 #

把:key换成数组的index即可。因为你的数组是固定长度的，index不会随元素内容变化而改变，能保证列表项的稳定性，避免不必要的组件重建。修改后的代码如下：

<template
    v-for="(myValue, index) in myValues"
    :key="index"
>
    <input
        type="text"
        class="form-control form-control-solid mb-3"
        :placeholder="'Choice #' + (index + 1)"
        v-model="myValues[index]"
    />
</template>

如果后续数组需要支持增删操作，也可以给每个元素分配唯一的固定ID作为key，但当前固定长度的场景下，用index完全满足需求。

内容的提问来源于stack exchange，提问作者Shadowman