详解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前端代码如下：

总结

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