vue 阻止form表单提交

       新的需求,需要使用原生表单提交并待参跳转到对应的页面。
       在网上查了一些,有些是在form表单添加 @submit.prevent="submit"但是没有成功,在点击注册的时候是函数都没有进去,同时还有一个问题,因为采用的是element ui 框架,select选择器选取内容无法进行获取,获取到的都是label。实际上要提交的是key,但是key是vue的方法,所以后面就采用了其他的方式。
       整体的思路就是:先阻止form表单提交,阻止之后在把key的值直接赋值到input上,这样就能够获取到key并发送给后台。
       如果要使用element UI上面的form提交没有找到方法,elementUI 在select表单的属性里面有一个属性是value-key,使用后发现也没有用,提交的内容一直都是input里面值。
       具体实现就是,使用原生submit方法进行手动提交,点击后使用document.getElementById进行赋值,如果要做验证的话,就需要阻止提交方法,JavaScript有两种提交方式,1、return false;2、preventDefault,考虑到兼容问题的可以使用returnValue来进行组织;
       第一种方式试过,不起作用,第二种方式可以解决。


       使用第二种方式解决

doSubmit() {
                var users= document.getElementById('users')
                var dept = document.getElementById('dept')
                 if (users.value =="" && dept.value =="") {
                    this.userNull = true
                    this.deptNull = true
                    window.event.returnValue = false
                } else if (dept.value =="") {
                    this.userNull = false
                    this.deptNull = true
                    window.event.returnValue = false
                } else if (users.value =="") {
                     this.userNull = true
                    this.deptNull = false
                    window.event.returnValue = false
                }else{
                    this.userNull = false
                    this.deptNull = false
                    dept.value = this.value.option
                }
            }

你可能感兴趣的:(vue 阻止form表单提交)