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

目录

• 主要解决的问题

• 一、后端返回的数据，提交到后端的数据格式如下：

• 二、vue前端代码如下：

• 总结

主要解决的问题

1、vue在循环的时候需要动态绑定不同的v-model；vue动态的表单，数据怎么绑定呢？

2、动态表单上所有name属性对应的键值对的形式提交到后端

一、后端返回的数据，提交到后端的数据格式如下：

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

二、vue前端代码如下：

<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>

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注asp之家的更多内容!

来源：https://blog.csdn.net/mqy1023/article/details/122162914