vant表单中的提交中的一些坑
使用vant表单时,当<van-form>标签中有@submit时,就代表了表单的提交事件
在v2.0+版本中表单中所有的 van-button 按钮都算是提交表单,原因是浏览器中 button 标签 type 属性的默认值为submit
,导致触发表单提交,但是在v3.0+版本中已经修改。所以如果你有标签中有@submit,而van-button中又定义了点击事件,那么此时表单会提交2次!
比如
<template>
<van-form @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>
</van-form>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
};
},
methods: {
onSubmit(values) {
console.log('submit', values);
},
},
};
</script>
native-type="submit" 属性的作用就跟 @click="onSubmit" 的作用一样,所以这里会提交两次表单!
解决办法:
就是两者留其一即可
但是有一点,如果是依靠 native-type="submit" 属性进行表单提交的话,定义在回调函数中的一些提示无法触发。这时我把 native-type="submit" 改为 native-type="button",使用原本的 @click 方法触发调用,解决
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~