Vue.js中通过变量存储的表单模型名动态操作输入框赋值

我有一个通过v-model实现双向绑定的Vue组件，需要在组件方法中为指定表单项赋值：当前我在触发的方法内，通过变量分别存储了目标表单模型的字段名、待设置的字段值，已知目标表单模型名称存储在变量中，请问该如何访问对应模型，完成输入框、下拉选择框的赋值操作？

原问题代码 #

<template>
 <a class='btn btn-sm btn-success' @click.prevent="openModule('sort__abc','asc')"><i class="fa fa-home" ></i> </a>
        
  <select v-model="searchform['sort__abc']" class='btn-default' style='zoom:80%;' :name='"sort__abc"'>
    <option value=''>Sort</option>
    <option value='asc'>Asc</option>
    <option value='desc'>Desc</option>
  </select>
</template>
<script>
var cpage = 1;
export default {
  name: 'user-management',
  data() {
    return {
      searchform: new Form()
    }
  },
  methods: {
    openModule(formModel, formData) {
      // 待实现：通过传入的字段名、字段值给表单项赋值
    }
  }
}
</script>

直接通过Vue实例的动态属性访问拿到目标表单对象，再通过中括号语法给对应字段赋值即可，Vue的双向绑定机制会自动同步更新输入框、下拉选择框的视图状态，不需要手动操作DOM。

修改openModule方法代码如下：

openModule(formModel, formData) {
  // 取到data中定义的表单实例，如果表单名本身是动态变量，直接替换为this[存表单名的变量]即可
  const targetForm = this.searchform
  // 动态给对应字段赋值，赋值后视图自动更新
  targetForm[formModel] = formData
}

注意事项 #

• 示例中点击按钮调用openModule('sort__abc','asc')后，searchform对象的sort__abc字段会被赋值为asc，下拉框会自动选中“Asc”选项
• 该写法对所有通过v-model绑定的表单控件（输入框、单选框、多选框、下拉选择器等）都生效
• 如果后续存在多个表单实例，只需要把表单实例名也作为参数传入方法，通过this[传入的表单实例名变量]就能动态拿到对应表单对象，不需要写死searchform

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