Vue动态表单场景下如何在input的change事件中传递字段名等额外参数

解决方案 #

方案1：给change事件传递额外参数 #

你可以在@change绑定的回调中，用$event捕获b-input默认抛出的输入值，同时把当前循环的field.fieldName作为参数传入方法，修改后的模板代码如下：

<div v-for="field in schema" :key="field.fieldName">
  <div> {{ field.fieldName }} </div>
  <div v-if="field.type==='text'">
    <b-input 
      type="text" 
      @change="onFieldChanged($event, field.fieldName)" 
      :placeholder="field.fieldName"
    ></b-input>
  </div>
</div>

对应的方法修改为：

methods: {
  onFieldChanged (val, fieldName) {
    // 拿到对应字段名后直接提交到Vuex即可，示例如下
    this.$store.commit('updateFormField', { fieldName, value: val })
  }
}

Vuex里对应的mutation示例：

mutations: {
  updateFormField(state, { fieldName, value }) {
    state.formData[fieldName] = value
  }
}

方案2：使用v-model绑定（你提到的思路实现） #

如果要走v-model的方式，因为要同步到Vuex，你可以用计算属性的get/set来适配v-model的双向绑定，不用单独写change事件：
模板修改为：

<div v-for="field in schema" :key="field.fieldName">
  <div> {{ field.fieldName }} </div>
  <div v-if="field.type==='text'">
    <b-input 
      type="text" 
      v-model="formFields[field.fieldName]" 
      :placeholder="field.fieldName"
    ></b-input>
  </div>
</div>

组件内的计算属性定义：

computed: {
  formFields: {
    get() {
      return this.$store.state.formData
    },
    set(newVal) {
      // newVal为完整的表单对象，按需提交mutation即可
      this.$store.commit('updateFullForm', newVal)
    }
  }
}

如果不需要全量更新表单，也可以给每个字段单独封装计算属性，或者用Vuex的mapState辅助函数简化取值逻辑。两种方案都可以实现需求：需要更细粒度的控制字段变更逻辑时，第一种带参数的change事件方案更灵活；追求代码简洁的场景下，v-model配合计算属性的方案更方便。

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