我的项目具有一个通用格式组件,它在内部具有大量的形式元素,包括输入,复选框,选择,无线电等。
此表单组件根据需要在不同页面上显示不同的表元素。
如此复杂的组件,我绝对不能手动安排它。
因此,果断地遵循背景,通过在后台返回的JSON数据制作动态渲染页面元素。其他不便的数据返回,编写本地JSON。
这样的
然后,我们遍历了此JSON数据,并根据类型字段渲染表单元素。
写完美。
一旦提交数据,就发现未批准后端验证。
开放网络,看看邪恶在风中在哪里?
已经发现,因为项目是VUE,因为所有格式数据都将在数据功能的表单属性下定义:例如:
结果,在用AXIO提交数据时,所有表格的数据都会共同提交。这里的表单是几页共享的所有数据。
由于该页面通过各种V-FOR动态生成当前页面所需的表单元元素,因此在提交时,数据中定义的数据不容易判断。
如果您手动编写各种条件以判断提交的数据,哪些数据被过滤且判断过多,则代码很大,并且不容易维护。
因此,我想到了使用Form自己的提交,Hehehehe。
由于提交附带的表格是根据页面元素提交的数据,因此,如果我们使用此提交方法,请首先收集背景所需的数据,因此不等于添加DataFilter中定义的表单层?
因此,它可以完美地解决我的需求。
因此,问题是如何在VUE中使用表单以获取数据?
首先,我们有一个表单,表单中的所有元素都有名称属性。
然后,通过手动调用获得表单表中的数据
可疑的交点我的ifloginforbid在哪里~~打印并查看
这是一个令人发指的价值。
检查元素并找到该复选框是看不见的状态。这是否应该是为什么未选择不稳定的原因,并且FormData根本没有获得此数据?
然后我检查此复选框,然后测试波浪
出去!这是不科学的,它实际上是一个空的字符!复选框不应该将其绑定为布尔类型的值吗?
再次查看元素,看看diao Min再次伤害了我。
我发现选择的EL-Checkbox中的输入就是这样:
这个组件突变是否太深了?不探索研究。但是我知道正常的输入可能是这样的:
因此,根据上述规则,我自己意识到了一个MyCheckbox组件:
在父组件中使用:
再次查看
成功,这次我们成功地获得了页面上所有表元素的数据,并生成要提交给背景的数据。
作者:阳光同学