Vue框架下input输入框打字时光标自动跳出问题技术咨询

问题原因 #

核心问题是v-for的key属性设置不符合规范：

• 你当前给循环项绑定的key是feature.name，而input框的v-model刚好绑定的是name属性，每输入一个字符修改name值后，对应循环项的key就会发生变化
• Vue检测到key变化时，会判定这是一个全新的节点，会销毁原有DOM重新渲染，因此输入框会失去焦点，光标自动跳出
• textarea绑定的是description属性，修改该值不会触发key变化，所以运行完全正常

修复方案 #

1. 替换v-for的key值 #

把:key="feature.name"替换为:key="feature.id"，id是固定不变的唯一标识，不会随内容修改发生变化，不会触发节点重建。

2. 简化v-model绑定写法（可选优化） #

循环中可以直接绑定当前迭代的feature对象的属性，不需要通过数组下标访问，避免索引错位的潜在问题。

修复后完整代码 #

<div v-for="feature in features" :key="feature.id" class="relative mt-4 mb-4">
  <h3 class="text-md leading-6 font-medium text-color-700">
    Feature-{{feature.id + 1}}
  </h3>
  <div class="sm:col-span-6">
    <div class="mt-1 flex rounded-md shadow-sm">
      <input id="name" v-model="feature.name" type="text" name="name" class="flex-1 text-field-style block w-full min-w-0 text-xs" placeholder="heading" >
    </div>
  </div>
  <div class="sm:col-span-6">
    <div class="mt-1 flex rounded-md shadow-sm">
      <textarea id="description" v-model="feature.description" placeholder="description" name="description" rows="3" class="block w-full text-xs text-field-style"></textarea>
    </div>
  </div>
</div>

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