耀极客论坛

 找回密码
 立即注册
查看: 547|回复: 0

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

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-8 01:35:08 | 显示全部楼层 |阅读模式
  这篇文章主要为大家介绍了Vue返回值动态生成表单及提交数据,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

主要解决的问题
  1、vue在循环的时候需要动态绑定不同的v-model;vue动态的表单,数据怎么绑定呢?
  2、动态表单上所有name属性对应的键值对的形式提交到后端

一、后端返回的数据,提交到后端的数据格式如下:
  1. // 后端返回的数据,根据返回类型用对应的组件
  2. [
  3. {
  4.     "componentType": "input",
  5.     "componentName": "username",
  6.     "required": "1", // 提交时是否要必须填写
  7.     "name": "姓名",
  8. },
  9. {
  10.         "componentType": "radio",
  11.         "componentName": "sex",
  12.         "required": "1",
  13.         "name": "性别",
  14.         "options": [
  15.             {
  16.                 "name": "男",
  17.                 "value": "0000"
  18.             },
  19.             {
  20.                 "name": "女",
  21.                 "value": "1111"
  22.             }
  23.         ]
  24.    }
  25. ]
  26. // 提交到服务器的数据格式
  27. {
  28. username: '我的姓名',
  29. sex: '0000'  // 对应”男“
  30. }
复制代码
二、vue前端代码如下:
  1. ‹template>
  2.   ‹div class="page-container">
  3.       ‹div class="dynamic-content">
  4.         ‹div v-for="(item,idx) in infoList" :key="idx">
  5.           ‹input class="common-input" v-model="modelItems[idx]" v-if="item.componentType=='input'">
  6.           ‹van-radio-group v-model="modelItems[idx]" direction="horizontal" v-if="item.componentType=='radio'">
  7.             ‹van-radio :name="itemRadio.value" v-for="itemRadio in item.options" :key="itemRadio.value">
  8.               {{itemRadio.name}}
  9.             ‹/van-radio>
  10.           ‹/van-radio-group>
  11.         ‹/div>
  12.         ‹div class="common-btn" @click="clickSubmit">提交数据‹/div>
  13.       ‹/div>
  14.   ‹/div>
  15. ‹/template>
  16. ‹script>
  17. import Vue from 'vue'
  18. import { getListData } from '@/api/home'
  19. import { RadioGroup, Radio } from 'vant'
  20. Vue.use(Radio).use(RadioGroup)
  21. export default {
  22.   data() {
  23.     return {
  24.       modelItems: {}, // vue在循环的时候需要动态绑定不同的v-model
  25.       infoList: []
  26.     }
  27.   },
  28.   mounted() {
  29.     this.formKeyArr = []
  30.     this.getList()
  31.   },
  32.   methods: {
  33.     getList() {
  34.       getListData()
  35.         .then((res) => {
  36.           const infoListData = res.infoList
  37.           this.infoList = infoListData
  38.           infoListData.forEach((item, index) => {
  39.           // 保存属性name和是否必填,后续提交数据用到
  40.           // { name: 'username', type: 1 }, { name: 'sex', type: 1}
  41.             this.formKeyArr.push({ name: item.componentName, type: item.required })
  42.           })
  43.         })
  44.         .catch(() => {
  45.         })
  46.     },
  47.     clickSubmit() {
  48.       const postParams = {} // 提交的数据
  49.       let isCanSubmit = true
  50.       this.formKeyArr.forEach((item, index) => {
  51.         console.log('item=', item)
  52.         if (item.type === '1' && !this.modelItems[index]) { // 所有require必须的标记符
  53.           // 请先填写完成, toast请填写完整
  54.           isCanSubmit = false
  55.         }
  56.         postParams[item['name']] = this.modelItems[index]
  57.       })
  58.       if (isCanSubmit) {
  59.       // 可以提交数据
  60.       // 可以拿到提交表单数据
  61.       // { username: '我的姓名', sex: '0000'  // 对应”男“ }
  62.       console.log('postParams=', postParams)
  63.       }
  64.     }
  65.   }
  66. }
  67. ‹/script>
  68. ‹style lang="scss">
  69. ‹/style>
复制代码
总结

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


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-28 20:40 , Processed in 0.079970 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表