Vue.js动态添加表单输入框问题：新增字段值同步重复

问题出在所有输入框都绑定到同一个全局属性，而非每个字段对应独立的数据对象。以下是具体修复步骤：

1. 调整模板代码 #

将v-for遍历对象改为deviceDetails数组，同时把v-model绑定到当前循环项的属性上：

<div class="col-sm-12 col-md-12 col-lg-12 mt-1 mb-1">
    <a class="text-uppercase text-decoration-none text-dark" href="#" @click.prevent="addField">
        <i class="bi bi-plus"></i>
        Add device properties
    </a>
</div>
<!-- 遍历deviceDetails数组，每个item对应一个独立字段组 -->
<div class="col-sm-12 col-md-4 col-lg-4 mt-1 mb-1" v-for="(item, index) in deviceDetails" :key="index">
    <div class="input-group">    
        <!-- 绑定当前item的fieldName -->
        <input type="text" class="form-control text-uppercase rounded-0 me-1" v-model="item.fieldName" placeholder="Field Name" @change="log">
        <!-- 绑定当前item的fieldValue -->
        <input type="text" class="form-control text-uppercase rounded-0 ms-1" v-model="item.fieldValue" placeholder="Field Value" @change="log">
    </div>
</div>

2. 简化JavaScript逻辑 #

不再需要fieldsCounter变量，直接操作deviceDetails数组即可：

// 在组件的data中初始化数组
data() {
    return {
        deviceDetails: []
    }
},
methods: {
    addField(){
        // 每次添加一个带空属性的独立对象，确保字段组数据隔离
        this.deviceDetails.push({ fieldName: '', fieldValue: '' })
    },
    log() {
        console.log(this.deviceDetails)
    }
}

修复原理 #

• 原代码中v-model="deviceDetails.fieldName"是给数组本身添加fieldName属性，所有输入框共享同一个属性值，导致内容同步。
• 修改后，每个输入框绑定到deviceDetails数组中对应索引的对象属性，每个字段组拥有独立的数据对象，输入内容自然不会互相影响。

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