Vue v-for列表删除异常：index作key删错项，唯一key致输入消失

针对你遇到的四个问题，核心解决思路是给每个输入项分配固定的唯一标识，同时让地址选择事件能关联到对应输入框的索引，以下是分步解决方案：

1. 重构数据结构，添加唯一ID #

把inputs数组的每一项改为包含唯一ID、纬度、经度的对象，避免用索引或可变的经纬度作为key：

data() {
  return {
    inputs: [{ id: Date.now(), lat: 0, lng: 0 }], // 用时间戳生成初始唯一ID
  };
},

2. 调整模板的key与事件传递 #

将:key替换为输入项的唯一ID，同时给GMapAutocomplete的place_changed事件传递当前输入框的索引：

<div class="address-inputs" v-for="(input, index) in inputs" :key="input.id">
  <div>
    <label>Enter delivery point:</label>
  </div>
  <!-- 传递当前索引给setPlace，明确要更新的目标项 -->
  <GMapAutocomplete @place_changed="(place) => setPlace(place, index)" class="address-input" />
  <button class="btn" v-if="inputs.length > 1" @click="removeInput(index)">Remove</button>
  <div>
    <font-awesome-icon class="handle" icon="fa-solid fa-plus" @click="addInput" />
  </div>
</div>

3. 修正setPlace方法，精准更新指定项 #

现在setPlace能拿到对应输入框的索引，直接更新数组中指定位置的项，同时保留原有ID避免组件重新渲染：

setPlace(place, index) {
  const updatedInput = {
    id: this.inputs[index].id, // 保留原ID，防止key变化导致组件重建
    lat: place.geometry.location.lat(),
    lng: place.geometry.location.lng(),
  };
  // 使用Vue的$set确保响应式更新
  this.$set(this.inputs, index, updatedInput);
},

4. 修正addInput方法，生成新的唯一ID #

每次新增输入框时，生成新的唯一ID，保证每个输入项的key不重复：

addInput() {
  this.inputs.push({ 
    id: Date.now(), 
    lat: 0, 
    lng: 0 
  });
},

问题根源说明 #

• 用index当key删除异常：Vue依赖key识别组件实例，删除项后后续项的index会前移，Vue会复用原有组件，导致页面显示删除了最后一项而非目标项。唯一ID能让Vue准确识别每个组件，避免复用错误。
• 用lat-lng当key地址消失：初始项的经纬度是0，选择地址后经纬度变化，key随之改变，Vue会销毁旧组件并创建新组件，输入框内容被清空。固定的唯一ID能保持组件实例稳定，不会触发重建。
• setPlace只能更新最后一项：原方法没有传递输入框索引，默认操作最后一项，现在通过事件传递索引，实现精准更新。
• push导致数据错位：原逻辑错误地修改最后一项数据，现在通过索引定位目标项，不会出现自动新增或数据错位的问题。

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