Vue循环渲染输入框时v-model绑定失效：值显示但无法更新问题求助

我来帮你梳理下问题根源，再给出能直接落地的解决方案：

核心问题分析 #

你的代码里有两个关键问题导致输入框无法修改：

1. v-model绑定对象错误：你在子组件中写的v-model="input.model"，实际上绑定的是父组件传来的inputs数组里每个元素的model字段——也就是一串字符串（比如'name'），而非子组件data中对应的name变量。这相当于把输入框绑定到了一个固定字符串，自然无法修改成你想要的内容。
2. 违反单向数据流原则：就算绑定逻辑正确，直接修改父组件传来的props数据也是Vue不推荐的操作，会导致数据流向混乱，引发不可预测的bug。

解决方案：子组件维护本地表单对象（最简洁的实现方式） #

我们可以在子组件里创建一个统一的表单数据对象，通过input.model的字符串值来绑定到这个对象的对应属性，这样就能正常实现双向绑定了：

修改后的子组件代码：

<template>
  <transition name="fade">
    <div class="add-box">
      <!-- 用input.id作为v-for的key，比index更可靠，避免组件复用异常 -->
      <div class="input--form" v-for="input in inputs" :key="input.id">
        <label>{{ input.label }}: </label>
        <!-- 绑定到formData的对应属性 -->
        <input :type="input.type" v-model="formData[input.model]">
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  props: {
    inputs: Array
  },
  data(){
    return{
      // 用一个对象统一管理所有表单字段
      formData: {
        name: '',
        desc: '',
        price: '',
        size: '',
        stock: ''
      }
    }
  },
  // 如果需要把表单数据传给父组件，添加这个方法即可
  methods: {
    submitForm() {
      this.$emit('form-submitted', this.formData)
    }
  }
}
</script>

如果父组件需要接收子组件的表单数据，只需要监听自定义事件：

<template>
  <div class="container">
    <add-product :inputs="inputs" @form-submitted="handleFormSubmit"></add-product>
  </div>
</template>
<script>
// ... 其他代码保持不变
methods: {
  handleFormSubmit(formData) {
    console.log('收到表单数据：', formData)
    // 在这里处理表单提交逻辑
  }
}
</script>

额外优化建议 #

• 把v-for的key从index替换成input.id：当数组元素顺序变化时，index会导致Vue错误复用组件，可能引发输入框状态异常，使用唯一的id作为key更稳定。
• 如果需要父组件统一维护表单数据，可以使用props + 自定义事件的同步模式（比如update:form-data），但对于简单场景，子组件维护本地表单对象已经足够满足需求。

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