vue 给form表单赋值_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来进行组织；

第一种方式试过，不起作用，第二种方式可以解决。

method="post" label-position="left" label-width="0px" class="demo-ruleForm login-container">

系统注册

* 请输入用户名

style="width:100%;">

* 请选择部门

使用第二种方式解决

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

}

}