VueJs -提交表单时使用preventDefault()

o8x7eapl  于 2022-11-17  发布在  Vue.js
关注(0)|答案(6)|浏览(178)

我需要以编程方式提交一个表单,但我也需要将其提交到preventDefault
现在我有以下内容:

submit() {
  this.$refs.form.submit()
}

它工作得很好,但我不能阻止默认的提交,这最终刷新了页面。

llycmphe

llycmphe1#

简短回答

可以将.prevent修饰符添加到@submit(或正在使用的任何其他v-on),如下所示:

<form @submit.prevent="myMethod">
  <button type="submit"></button>
</form>

在提交表单的情况下,这将阻止刷新页面的默认行为。

长答案

有几种方法可以修改事件。
来自Vue 3文档:
在事件处理程序中调用event.preventDefault()event.stopPropagation()是一个非常常见的需求。尽管我们可以在方法中轻松地做到这一点,但如果方法能够纯粹地处理数据逻辑而不是必须处理DOM事件细节,那会更好。
为了解决这个问题,Vue为v-on提供了事件修饰符。

<!-- 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>

另一个选项:
有时我们也需要在内联语句处理程序中访问原始DOM事件,可以使用特殊的$event变量将其传递到方法中:
第一次
干杯:)

91zkwejq

91zkwejq2#

不太明白@Armin Ayari的答案,例如为什么代码必须在methods对象中?无论如何,在Vue中,这对我来说是有效的:

<form ref="form" @submit.prevent="myMethod">
  <button type="submit"></button>
</form>

这会阻止页面刷新,并改为调用myMethod
你甚至不需要ref。理解这是一个老问题,但我发现自己在调试后,发现我的形式标记只是放错了地方。

7rtdyuoh

7rtdyuoh3#

我不知道我是否正确地理解了您的问题,但您可以防止表单出现以下默认行为:

this.$refs.form.addEventListener("submit", (event) => {
    event.preventDefault()
});

也许这可以帮助你:
第一次

q9rjltbz

q9rjltbz4#

我想是多娜救命!

<form method="POST" action="http::localhost:8080/" @submit.prevent="submit_login($event)">
    // enter yours inputs here
</form>

submit_login(e) {
    if (true) {
        e.target.submit();
    },
},
jexiocij

jexiocij5#

经过一些适当的调查,这里没有一个答案与原来的问题有关。
我找到了您的解决方案,但它不是VueJS特定的,请参考以下文章:Javascript e.preventDefault(); not working on submit()

答案

如果您想正确地运行preventDefault()或甚至运行其他函数,那么您执行submit this.$refs.form.submit()的编程方式是不正确的。
您需要运行this.$refs.form.requestSubmit(),这将复制该功能,就好像您已经让一个子<button>运行clicked事件一样。

idfiyjo8

idfiyjo86#

首先,不要使用preventDefault方法。我将在jQuery上说明这个问题:

$('#myForm').on('submit', function (event) {
  // step 1.
  // stop current action, prevent submitting 
  event.preventDefault()

  // step 2.
  // validate inputs
  // some validation code

  // step 3.
  // everything ok, submit it
  this.submit()
})

此代码的问题出在哪里?当您在步骤3中以编程方式提交此表单时,它将再次被捕获并再次在步骤1处停止。因此,您将永远无法提交此表单。解决方案:

$('#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
})

我希望你明白了。所以,我认为你需要的不是preventDefault方法,而是在@submit事件上调用的doSomething方法中返回true或false。

相关问题