vant表单中的提交中的一些坑
使用vant表单时,当
在v2.0+版本中表单中所有的 van-button 按钮都算是提交表单,原因是浏览器中 button 标签 type 属性的默认值为submit
,导致触发表单提交,但是在v3.0+版本中已经修改。所以如果你有标签中有@submit,而van-button中又定义了点击事件,那么此时表单会提交2次!
比如
submit="onSubmit">
<van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
:rules="[{ required: true, message: '请填写用户名' }]"
/>
<van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
:rules="[{ required: true, message: '请填写密码' }]"
/>
<div style="margin: 16px;">
<van-button round block type="info" native-type="submit" @click="onSubmit">提交van-button>
div>
native-type="submit" 属性的作用就跟 @click="onSubmit" 的作用一样,所以这里会提交两次表单!
解决办法:
就是两者留其一即可
但是有一点,如果是依靠 native-type="submit" 属性进行表单提交的话,定义在回调函数中的一些提示无法触发。这时我把 native-type="submit" 改为 native-type="button",使用原本的 @click 方法触发调用,解决