<!-- the click event's propagation will be stopped -->
<a @click.stop="doThis"></a>
<!-- the submit event will no longer reload the page -->
<form @submit.prevent="onSubmit"></form>
<!-- modifiers can be chained -->
<a @click.stop.prevent="doThat"></a>
<!-- just the modifier -->
<form @submit.prevent></form>
<!-- use capture mode when adding the event listener -->
<!-- i.e. an event targeting an inner element is handled here before being handled by that element -->
<div @click.capture="doThis">...</div>
<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div @click.self="doThat">...</div>
$('#myForm').on('submit', function (event) {
// step 1.
// validate inputs
// some validation code
// this code will be always executed
// before this form will be submitted
// step 2.
// then do something like this
// continue submitting form and exit
// this callback with returning true
if (inputsAre === 'ok') return true
// if inputs are not ok, program continues
// with following line, which ends this
// callback with false and form will be not submitted
return false
})
6条答案
按热度按时间llycmphe1#
简短回答
可以将
.prevent
修饰符添加到@submit
(或正在使用的任何其他v-on
),如下所示:在提交表单的情况下,这将阻止刷新页面的默认行为。
长答案
有几种方法可以修改事件。
来自Vue 3文档:
在事件处理程序中调用
event.preventDefault()
或event.stopPropagation()
是一个非常常见的需求。尽管我们可以在方法中轻松地做到这一点,但如果方法能够纯粹地处理数据逻辑而不是必须处理DOM事件细节,那会更好。为了解决这个问题,Vue为v-on提供了事件修饰符。
另一个选项:
有时我们也需要在内联语句处理程序中访问原始DOM事件,可以使用特殊的$event变量将其传递到方法中:
第一次
干杯:)
91zkwejq2#
不太明白@Armin Ayari的答案,例如为什么代码必须在
methods
对象中?无论如何,在Vue中,这对我来说是有效的:这会阻止页面刷新,并改为调用
myMethod
。你甚至不需要
ref
。理解这是一个老问题,但我发现自己在调试后,发现我的形式标记只是放错了地方。7rtdyuoh3#
我不知道我是否正确地理解了您的问题,但您可以防止表单出现以下默认行为:
也许这可以帮助你:
第一次
q9rjltbz4#
我想是多娜救命!
jexiocij5#
经过一些适当的调查,这里没有一个答案与原来的问题有关。
我找到了您的解决方案,但它不是VueJS特定的,请参考以下文章:Javascript e.preventDefault(); not working on submit()
答案
如果您想正确地运行
preventDefault()
或甚至运行其他函数,那么您执行submitthis.$refs.form.submit()
的编程方式是不正确的。您需要运行
this.$refs.form.requestSubmit()
,这将复制该功能,就好像您已经让一个子<button>
运行clicked
事件一样。idfiyjo86#
首先,不要使用preventDefault方法。我将在jQuery上说明这个问题:
此代码的问题出在哪里?当您在步骤3中以编程方式提交此表单时,它将再次被捕获并再次在步骤1处停止。因此,您将永远无法提交此表单。解决方案:
我希望你明白了。所以,我认为你需要的不是preventDefault方法,而是在@submit事件上调用的doSomething方法中返回true或false。