vue一个页面多个组件,点击提交同时保存三个组件所有表单值(二) |
您所在的位置:网站首页 › vue提交多个表单 › vue一个页面多个组件,点击提交同时保存三个组件所有表单值(二) |
项目场景:
需求:一个页面多个组件,点击提交同时保存三个组件所有表单值。 场景:一个页面的表单太多分为三个页面来提交,每个页面都有保存和提交的按钮。要求每个页面如果不同的人填写的话,点击当前页面的保存或者提交按钮,三个组件中的所有表单都会被提交。类似下面这种 问题描述提示:如何在某个组件中点击保存时,每个表单都保存。 思路:获取三个组件实例拿到form表单值。再请求接口,统一提交。 遇到的问题:在某个页面有个车牌号,需要获取,但是车牌号是汉字和字母拼接的数据,所以,我在该页面点击保存的时候,采取拼接车牌号。后来发现我点击其他界面的时候,车牌号总是为空,拿不到数据。发现拼接字符串不能在组件中,而应该在父组件中,统一提交表单之前,不然只有在点击保存的时候能获取到,那其他页面点击保存的时候,当然就获取不到了。 解决:在父组件中凭借车牌号。 save() { let form1 = this.$refs.weightInputRef.form let form2 = this.$refs.unloadInputRef.form let form3 = this.$refs.tareInputRef.form // // 车牌号转成字符串 form1.carNum = form1.car_prefix.concat(form1.car_num) let formData = { ...form1, ...form2, ...form3 } formData.oprType = 'save' //再请求保存的接口 }头一次遇见这种需求,也是不长存在的需求,就记录一下。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |