vue循环获取动态表单数据,vue动态生成表单
这篇文章主要为大家介绍了某视频剪辑软件返回值动态生成表单及提交数据，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
目录
主要解决的问题一、后端返回的数据，提交到后端的数据格式如下：二、vue前端代码如下：总结
主要解决的问题
1、vue在循环的时候需要动态绑定不同的v型；某视频剪辑软件动态的表单，数据怎么绑定呢？
2、动态表单上所有名字属性对应的键值对的形式提交到后端
一、后端返回的数据，提交到后端的数据格式如下：
//后端返回的数据，根据返回类型用对应的组件
[
{
组件类型“:”输入，
组件名:用户名，
必需的: 1 ,//提交时是否要必须填写
姓名: 姓名，
},
{
组件类型“:”单选，
组件名:性别，
必需的: 1 ,
姓名: 性别，
选项:[
{
姓名: 男，
值: 0000
},
{
姓名: 女，
值: 1111
}
]
}
]
//提交到服务器的数据格式
{
用户名： 我的姓名，
性别： 0000 //对应"男"
}
二、vue前端代码如下：
模板
div class=页面容器
div class=动态内容
信息列表中的div v-for=(item，idx ):key= idx
输入class= common-input v-model= model items[idx] v-if= item。组件类型==输入
van-radio-group v-model=模型项目[idx]方向=水平 v-if=项目。组件类型== radio
车载收音机：name= item radio。项目中“v-for=”项目单选按钮的值。选项:key=项目单选。“价值”
{{itemRadio.name}}
/面包车-收音机
/van-radio-group
/div
div class= common-BTN @ click=点击提交提交数据/div
/div
/div
/模板
脚本
从“vue”导入某视频剪辑软件
从" @/api/home "导入{ getListData }
从"万特"导入收音机组，收音机
Vue.use(收音机)。使用（单选按钮组)
导出默认值{
data() {
返回{
模型项：{}，//vue在循环的时候需要动态绑定不同的v型车
信息列表：[]
}
},
已安装(){
this.formKeyArr=[]
this.getList()
},
方法：{
getList() {
getListData()。然后((res)={
const infoListData=res.infoList
this.infoList=infoListData
infoListData.forEach((item，index)={
//保存属性名字和是否必填，后续提交数据用到
//{姓名：用户名，类型：1},{姓名：性别，类型：1 }
这个。formkey arr。推送({ name:item。组件名称，类型：item.required })
})
})。catch(()={
})
},
单击提交(){
const postParams={} //提交的数据
设isCanSubmit=true
this.formKeyArr.forEach((item，index)={
console.log(item=，item)
if (item.type===1 ！this.modelItems[index]) { //所有需要必须的标记符
//请先填写完成，吐司请填写完整
isCanSubmit=false
}
postParams[item[ name ]]=this。模型项目[索引]
})
if (isCanSubmit) {
//可以提交数据
//可以拿到提交表单数据
//{用户名： 我的姓名，性别： 0000 //对应"男" }
console.log(postParams=，postParams)
}
}
}
}
/脚本
样式lang=scss
/风格
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。