Vue中如何获取v-for生成的文本输入框的输入值？

当然不用放弃通用方案，完全可以实现动态表单的取值需求，下面给你两种常用的实现方式：

方法一：使用对象存储表单值 #

这种方式适合每个表单项有唯一标识（比如字段名）的场景，把表单值统一存在一个对象里，通过v-model绑定对象的对应属性。

修改后的代码示例：

<template>
  <div class="form-group" v-for="item in formItems" :key="item.field">
    <label :for="item.field">{{item.label}}</label>
    <input 
      type="text" 
      class="form-control"  
      :id="item.field"
      v-model="formData[item.field]"
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 假设formItems每个项包含label（显示文本）和field（唯一字段名）
      formItems: [
        { label: '用户名', field: 'username' },
        { label: '邮箱', field: 'email' },
        { label: '手机号', field: 'phone' }
      ],
      // 存储表单值的对象
      formData: {}
    }
  },
  methods: {
    submitForm() {
      // 提交时直接使用this.formData，里面就是所有输入框的值
      console.log(this.formData)
    }
  }
}
</script>

方法二：使用数组存储表单值 #

如果你的formItems没有唯一字段名，也可以用数组按索引来绑定，数组的索引和v-for的索引对应。

修改后的代码示例：

<template>
  <div class="form-group" v-for="(item, index) in formItems" :key="index">
    <label :for="`input-${index}`">{{item.label}}</label>
    <input 
      type="text" 
      class="form-control"  
      :id="`input-${index}`"
      v-model="formData[index]"
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      formItems: [
        { label: '用户名' },
        { label: '邮箱' },
        { label: '手机号' }
      ],
      // 初始化数组，长度和formItems一致，默认值为空字符串
      formData: Array(this.formItems.length).fill('')
    }
  },
  methods: {
    submitForm() {
      // formData数组里按顺序存储了每个输入框的值
      console.log(this.formData)
    }
  }
}
</script>

另外注意：原代码里所有输入框的id都是同一个值，这会导致标签和输入框的关联失效，建议改成动态id（比如上面示例里的:id="item.field"或:id="input-${index}"），同时label的for属性也要对应绑定。

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