概述
有时候我们在用vue项目时，肯定会遇到这样的问题，业务中需要用到form，但是点击提交按钮会触发form的默认提交，如果用在form上绑定return false，需要单独写验证函数和接收到数据后对数据的处理函数，这样非常不方便，有没有办法阻止form自己的默认提交，在点击提交按钮或者在输入框聚焦时点回车，我们根据自己的需求处理数据呢？
很简单，vue中的@submit.prevent属性可以帮我们实现这个功能，当我们点击提交按钮时，表单并不会提交，而是会触发绑定的函数，就像下边的onSubmith函数一样，我们可以在函数里做想做的事情，比如参数完整性验证，ajax提交，对后台数据的处理等等。
// html
<form autocomplete="off" @submit.prevent="onSubmit" action="https://www.baidu.com">
<input type="text" />
<button type="submit">提交</button>
</form>
// js
methods: {
onSubmit: function () {
// 阻止默认表单提交
// 做你自己想做的事，比如ajax请求后台数据
return false;
}
}
最后
以上就是忧郁小虾米为你收集整理的vue中阻止form表单自动提交的全部内容，希望文章能够帮你解决vue中阻止form表单自动提交所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复