详解Vue返回值动态生成表单及提交数据的办法

// 后端返回的数据，根据返回类型用对应的组件[	{	    "componentType": "input",	    "componentName": "username",	    "required": "1", // 提交时是否要必须填写	    "name": "姓名",	},	{        "componentType": "radio",        "componentName": "sex",        "required": "1",        "name": "性别",        "options": [            {                "name": "男",                "value": "0000"            },            {                "name": "女",                "value": "1111"            }        ]   }]// 提交到服务器的数据格式{	username: '我的姓名'，	sex: '0000'  // 对应”男“}

<template>  <div class="page-container">      <div class="dynamic-content">        <div v-for="(item,idx) in infoList" :key="idx">          <input class="common-input" v-model="modelItems[idx]" v-if="item.componentType=='input'">          <van-radio-group v-model="modelItems[idx]" direction="horizontal" v-if="item.componentType=='radio'">            <van-radio :name="itemRadio.value" v-for="itemRadio in item.options" :key="itemRadio.value">              {{itemRadio.name}}            </van-radio>          </van-radio-group>        </div>        <div class="common-btn" @click="clickSubmit">提交数据</div>      </div>  </div></template><script>import Vue from 'vue'import { getListData } from '@/api/home'import { RadioGroup, Radio } from 'vant'Vue.use(Radio).use(RadioGroup)export default {  data() {    return {      modelItems: {}, // vue在循环的时候需要动态绑定不同的v-model      infoList: []    }  },  mounted() {    this.formKeyArr = []    this.getList()  },  methods: {    getList() {      getListData()        .then((res) => {          const infoListData = res.infoList          this.infoList = infoListData          infoListData.forEach((item, index) => {          	// 保存属性name和是否必填，后续提交数据用到           	// { name: 'username', type: 1 }, { name: 'sex', type: 1}            this.formKeyArr.push({ name: item.componentName, type: item.required })          })        })        .catch(() => {        })    },    clickSubmit() {      const postParams = {} // 提交的数据      let isCanSubmit = true      this.formKeyArr.forEach((item, index) => {        console.log('item=', item)        if (item.type === '1' && !this.modelItems[index]) { // 所有require必须的标记符          // 请先填写完成, toast请填写完整          isCanSubmit = false        }        postParams[item['name']] = this.modelItems[index]      })      if (isCanSubmit) {      	// 可以提交数据      	// 可以拿到提交表单数据      	// { username: '我的姓名', sex: '0000'  // 对应”男“ }      	console.log('postParams=', postParams)      }    }  }}</script><style lang="scss"></style>