Vue.js中循环表单v-model重复显示数据的问题求助

问题原因 #

你遇到的输入同步问题，核心原因是添加新乘客时复用了同一个对象的引用——如果你的新增逻辑是直接复制已有乘客对象（比如this.passengers.push(this.passengers[0])），所有新增的乘客对象会指向同一块内存空间，修改其中一个的FirstName，其他表单自然会同步变化。另外模板里固定的id="firstName"会导致DOM元素id重复，也会引发label与input的关联异常。

解决方案 #

1. 新增乘客时创建独立对象 #

添加新乘客必须生成全新的对象，避免引用复用：

// 错误示例：复用同一对象引用
this.passengers.push(this.passengers[0])

// 正确示例：创建新的空对象
this.passengers.push({ FirstName: '' })

// 若有固定结构，用展开运算符复制模板对象
this.passengers.push({ ...{ FirstName: '' } })

2. 修复重复的id属性 #

给每个input和对应的label设置唯一id，避免DOM冲突：

<div
  class="container"
  v-for="(passenger, passengerIndex) in passengers"
  :key="passengerIndex"
>
  <div class="col-md-6 form-group">
    <label :for="`firstName-${passengerIndex}`">First Name</label>
    <input
      type="text"
      class="form-control"
      :id="`firstName-${passengerIndex}`"
      v-model="passenger.FirstName"
    >
  </div>
</div>

3. 优化key值（可选） #

如果后续有删除、排序等操作，建议给每个乘客对象添加唯一标识（如id字段），用该标识作为key，提升Vue虚拟DOM的更新效率：

// 数据示例
passengers: [
  { id: 1, FirstName: '' }
]

// 模板修改
v-for="(passenger) in passengers"
:key="passenger.id"

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