Vue.js如何收集数量不固定的输入框值？

嗨，这个问题其实很好解决！你只需要用一个对象来动态存储每个输入框的值就行，不用预先定义每个字段，完全适配API返回的动态数量。

第一步：新增存储输入值的响应式对象 #

在组件的data里加一个空对象inputValues，专门用来存每个输入框的值，键名就对应输入框的名称（也就是identifier.name）：

data() {
  return {
    identifiers: [{ name: "Flavour" }, { name: "Size" }, { name: "Color" }],
    inputValues: {} // 动态存储输入值的容器
  };
}

第二步：给输入框绑定动态v-model #

把模板里的value替换成动态的v-model，绑定到inputValues[identifier.name]，这样每个输入框的内容都会自动同步到对象的对应键下：

<li v-for="identifier in identifiers" :key="identifier.name"> 
  {{identifier.name}}
  <input type="text" v-model="inputValues[identifier.name]" /> 
</li>

小提醒：把key改成identifier.name会更靠谱，如果API返回的项有唯一ID的话，用ID当key是最优解，避免重复名称导致的渲染问题。

第三步：轻松获取所有输入值 #

比如点击Add按钮的时候，直接访问this.inputValues就能拿到所有输入框的值了，它会是一个类似{ Flavour: "草莓", Size: "XL", Color: "红色" }的对象，不管输入框数量怎么变，都能完整收集。

给Add按钮加个点击事件试试：

<button type="button" @click="handleSubmit">Add</button>

然后在methods里处理：

methods: {
  handleSubmit() {
    console.log("收集到的所有值：", this.inputValues);
    // 这里可以把inputValues传给后端，或者做你需要的逻辑处理
  }
}

可选优化：初始化输入值 #

如果希望页面加载时输入框有默认空值（或者其他默认值），可以在获取API数据后初始化inputValues：

mounted() {
  // 模拟API请求获取动态的identifiers
  setTimeout(() => {
    this.identifiers = [{ name: "Color" }, { name: "Material" }];
    // 给每个输入项初始化空字符串，确保响应式
    this.identifiers.forEach(item => {
      this.$set(this.inputValues, item.name, "");
    });
  }, 1000);
}

其实不用这一步也能正常工作，因为Vue会自动给inputValues添加新属性并保持响应式，这一步只是让初始化更严谨而已。

这样不管API返回多少个输入框，都能完美收集每个输入框的值啦！

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