Vue中v-for渲染动态表单时如何为单选/复选分组绑定不同v-model

解决步骤 #

1. 为formData的每个问题项新增绑定字段映射 #

你需要给formData数组里的每个问题对象新增bind_field属性，值对应你data中要绑定的属性名，示例配置如下：

// formData数组示例
formData: [
  // 第一个复选框组
  {
    "id": 1,
    "bind_field": "servicesId", // 对应data中的复选框绑定属性
    "question_type_id": 1,
    "title": "new ent",
    "question_text": "Planirate da se bavite:",
    // 其他原有字段保持不变
  },
  // 第二个单选组示例
  {
    "id": 2,
    "bind_field": "personId", // 对应data中的personId
    "question_type_id": 2,
    "question_text": "第二个问题的标题",
    "question_type": {
      "id": 2,
      "type": "radio"
    }
    // 其他原有字段保持不变
  },
  // 剩下的7个单选组依次配置bind_field为：incomeId、extraIncomeId、pdvId、paymentId、clientId、cashRegisterId、eBankingId
]

2. 调整模板的v-model和补充单选分组属性 #

直接通过$data访问你定义的响应式属性，同时给单选按钮加上name属性保证同组单选互斥，调整后的模板代码如下：

<div v-for="data in formData" :key="data.id">
  <h5>{{data.question_text}}</h5>
  <div class="form-check" v-for="text_o in data.question_options" :key="text_o.id">
    <input  class="form-check-input"   
     :type="data.question_type.type" 
     :value="text_o.id" 
     :id="text_o.id"
     :name="`question_group_${data.id}`" <!-- 保证同组单选仅在组内互斥 -->
     v-model="$data[data.bind_field]"> <!-- 动态绑定对应data属性 -->

   <label class="form-check-label" :for="text_o.id"> {{text_o.option_text}} </label>
  </div>
</div>

优化方案（可选） #

如果你觉得零散的data属性不好管理，可以把所有表单绑定属性收纳到同一个对象中，后续提交表单时可以直接读取整个对象，操作更简便：

1. 调整data结构：

data() {
  return{
    // 所有表单绑定属性统一放到formState中管理
    formState: {
      servicesId: [],
      personId: '',
      incomeId:'',
      extraIncomeId: '',
      pdvId: '',
      paymentId: '',
      clientId: '',
      cashRegisterId: '',
      eBankingId: '',
    },
    formData: [/* 原有配置不变 */]
  }
}

2. 模板的v-model调整为：

v-model="formState[data.bind_field]"

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