Vue动态输入框数据重复：如何实现独立输入并绑定数组？

问题分析 #

所有输入框同步重复的核心原因是所有输入框的v-model都绑定了同一个数组points.compartments_detail，没有区分每个输入框对应的数组元素。当你在任意输入框输入时，整个数组的引用被修改，导致所有绑定该数组的输入框同步更新。

解决思路 #

1. 让每个输入框绑定points.compartments_detail数组中对应索引的元素，确保输入内容独立存储。
2. 同步维护points.compartments_detail和comparment_capacity的长度，保证输入框数量和数组元素数量一致。
3. 初始化时给points.compartments_detail设置默认空数组，和comparment_capacity对应。

修改后的代码实现 #

模板代码 #

</v-row>
  <v-text-field
    v-model="points.number_compartments"
    label="COMPARTIMIENTOS"
    outlined
    :disabled="actionQuotation === 'VER'"
    type="number"
    @change="logSelect(), addCompartmentCapacity(points.number_compartments), deleteComparmentCapacity(points.number_compartments)"
    class="mx-3"
    dense
  />
</v-row>
<!-- 生成对应数量的输入框，每个绑定数组对应索引的元素 -->
<v-row v-for="(compartment, index) in comparment_capacity" :key="index" class="mx-0">
  <v-row v-if="points.number_compartments > 1">
    <v-text-field
      v-model="points.compartments_detail[index]"
      label="ESPECIFICAR CAPACIDAD DE COMPARTIMIENTO" 
      outlined
      :disabled="actionQuotation === 'VER'"
      class="mx-3"
      dense
      hint="Ejemplo: 1000 galones / Click en boton agregar para añadir mas campos"
    />
  </v-row>
</v-row>

数据定义 #

data() {
  return {
    comparment_capacity: [{ compartment: "" }],
    points: {
      number_compartments: 1,
      compartments_detail: [] // 初始化为空数组
    }
  }
}

字段新增/删除函数 #

addCompartmentCapacity(item) {
  while (this.comparment_capacity.length < item) {
    this.comparment_capacity.push({ compartment: "" });
    // 同步给compartments_detail添加空元素，保证长度一致
    this.points.compartments_detail.push("");
  }
},
deleteComparmentCapacity(item) {
  while (this.comparment_capacity.length > item) {
    if (this.comparment_capacity.length > 1) {
      this.comparment_capacity.pop();
      // 同步删除compartments_detail的最后一个元素
      this.points.compartments_detail.pop();
    }
  }
}

额外说明 #

• 如果需要初始化时就有一个输入框对应的数据，可在data里给points.compartments_detail初始化为[""]，和comparment_capacity的初始长度匹配。
• 确保key使用index是临时方案，如果后续有更唯一的标识（比如每个 compartment 的ID），替换成唯一key会更稳定。

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