Vue3动态生成输入框时，如何为每个字段正确绑定v-model并获取数据？

你的代码核心问题在于v-model绑定逻辑错误，以及v-for的数据源与操作数组不匹配，导致新生成的输入框无法独立存储数据。以下是具体修改方案：

关键修改点 #

1. 对齐v-for数据源与操作数组：原代码用fieldsCounter遍历，但新增字段时往deviceDetails数组push对象，两者完全脱节，应直接遍历deviceDetails数组。
2. 修正v-model绑定目标：原代码绑定到deviceDetails.fieldName，但deviceDetails是数组，正确的绑定应该指向数组中每个元素的独立属性（即当前遍历项的fieldName和fieldValue）。
3. 初始化数组结构：确保deviceDetails初始化为数组，默认可包含一个空对象，保证页面加载时显示初始输入字段。

修改后的完整代码 #

模板部分 #

<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>
<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">    
        <input type="text" class="form-control text-uppercase rounded-0 me-1" v-model="item.fieldName" placeholder="Field Name" @change="log">
        <input type="text" class="form-control text-uppercase rounded-0 ms-1" v-model="item.fieldValue" placeholder="Field Value" @change="log">
    </div>
</div>

脚本部分 #

data() {
    return {
        deviceDetails: [{}] // 初始化一个空字段，页面加载时显示
    }
},
methods: {
    addField() {
        // 新增字段时push带初始空值的对象，避免属性undefined
        this.deviceDetails.push({ fieldName: '', fieldValue: '' });
    },
    log() {
        // 现在可以打印出所有字段的独立数据
        console.log(this.deviceDetails);
    }
}

效果说明 #

修改后，每个动态生成的输入框都会绑定到deviceDetails数组中对应的对象属性，新增字段时会自动创建独立的存储单元。点击输入框的change事件后，log方法会打印出包含所有字段数据的数组，每个元素对应一组输入框的fieldName和fieldValue。

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