详解Vue返回值动态生成表单及提交数据的办法
作者:mqy1023
这篇文章主要为大家介绍了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>
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!