Vue.js如何获取列表循环生成的input绑定的:value值并提交

架构老林

2026-10-2

问题原因

你当前的写法存在3个核心问题导致拿不到输入值：

@input事件绑定逻辑错误：你写的@input="form.amount[post.employee_id]"仅读取了对应属性，没有把输入框的最新值赋值给该属性，数据自然不会更新
初始值绑定错误：你给v-bind:value绑定的是post.employee_id（员工ID），不符合金额输入框的初始值预期，应该绑定对应员工的初始金额字段
Vue响应式规则限制：如果form.amount下没有预先定义对应employee_id的属性，直接通过索引赋值不会触发响应式更新，需要用$set处理

修复方案

步骤1：初始化`form.amount`的响应式属性

在你获取到posts列表数据的回调逻辑中，先初始化form.amount的所有键值对，保证符合Vue响应式要求：

// 示例：请求拿到posts之后执行
this.posts = response.data.posts
this.form.amount = {}
this.posts.forEach(post => {
  // 第二个参数是初始值，有历史金额就传post.amount，需要默认填员工ID就传post.employee_id，无默认值传空字符串即可
  this.$set(this.form.amount, post.employee_id, post.amount || '')
})

步骤2：修改input的绑定逻辑，用v-model实现双向绑定

直接用Vue内置的v-model语法糖替代分开的value和input绑定，代码更简洁：

<tr v-for="(post, index) in posts" v-bind:index="index">
    <td>{{ post.rut }}</td>
    <td>{{ post.names }} {{ post.father_lastname }} {{ post.mother_lastname }}</td>
    <td>
       <input 
         type="number" 
         class="form-control" 
         :id="'amount_' + post.employee_id" 
         v-model="form.amount[post.employee_id]" 
         placeholder="Ingresa el monto"
       >
    </td>
</tr>

注：修改了id的生成规则，避免v-for生成重复id导致的HTML规范问题