data() { return { value: '' } }, watch: { value(v, o) { this.throttleHandle(() => { this.$emit('changeComponent', { number: this.number, value: this.$data.value }) }) } },
但是数据保存到哪里？怎么保存呢？ 让后端给一个表单全部字段的接口，取到数据存到data中，每次数据更新就去查找是否存在这个字段，有的话就赋值保存起来。后面提交的时候，就提交这个对象。
表单校验
提交的时候，希望用户能够把表单填完再调用提交接口，需要前端校验是否填完没有的话，就给响应的toast请提示，阻止表单提交。
this.checkFrom(freedomConfig, preWordorderData).then(canSubmit => { canSubmit && postSubmitWorkorder(preWordorderData).then(res => { if (res.code === 0) { showLoading() this.$router.push(`/detail/${res.data.id}`) } }) })
checkFrom 为我们的校验方法，循环遍历预创建表单，从data里查看该字段是否有值，没有的话就给于toast提示。并返回一个promise， resolve(false) 。如果都校验通过返回 resolve(true) 。这样就可以使checkFrom成为一个异步函数。
其中需要注意的是下拉框选择后的值为大于0的数字、上传图片的属性值是数组。
一个动态表单的创建、校验、数据整合就完成了。很多时候需要写大量代码的场景思路上很简单，反倒是抽象一个组件需要考虑的更多。
总结
以上所述是小编给大家介绍的使用Vue生成动态表单，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: