input 每输入一次都会失去焦点需要再次点击才能输入

input 每输入一次都会失去焦点需要再次点击才能输入

1.情况描述，就是一个input框输入之后就会自动失去焦点，我需要再次点击获取焦点之后才可以进行下一次输入，并且还是只能输入一次就立马又失去焦点，当然这个input框是循环出来的，具体代码如下：

        <div
          class="input-area"
          v-for="item in inviteeInfoList"
          :key="item.phone"
        >
          <div class="input-area-title-delete">
            <div class="name-title">邀请人{{ item.serialNumber }}</div>
            <div class="delete-btn" @click="deleteInviteeInfo(item)">
              删除
            </div>
          </div>
          <div class="input-area-name-phone">
            <div class="invitee-name">姓名</div>
            <input
              :style="!item.nameCorrect ? 'color:#EC4B3C ' : ''"
              v-model="item.name"
              class="name-input"
              type="text"
              maxlength="6"
              @blur="nameInput(item.name, item)"
              placeholder="请输入"
            />
            <div class="invitee-phone">电话</div>
            <input
              :style="!item.phoneCorrect ? 'color:#EC4B3C ' : ''"
              @blur="phoneInput(item.phone, item)"
              v-model="item.phone"
              class="phone-input"
              type="number"
              maxlength="11"
              placeholder="请输入"
            />
          </div>
        </div>

2.出现上述问题其实就是遍历的时候key值绑定的不合理，我绑的key就是input的输入值phone，我推测应该是因为key的改变让页面重绘导致input失去焦点。

3.我们只需要改变这个key的绑定，换一个跟input不相关的值就ok，比如

4.就可以解决问题了，核心问题就是遍历的时候key的绑定和input输入绑定的值相同导致的，换一个跟input不相关的值作为key就可以解决问题。