VueJs - 表单提交时的 PreventDefault()

我需要以编程方式提交表单，但我需要它preventDefault以及。

现在我有以下内容：

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

它工作正常，但我无法阻止提交的默认设置，最终刷新页面。

简短回答

您可以添加.prevent修饰符为@submit（或任何其他v-on你正在使用），像这样：

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

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

长答案

有多种方法可以修改事件。

来自 Vue 3 文档 https://v3.vuejs.org/guide/events.html#event-modifiers:

这是一个很常见的需要打电话event.preventDefault() or 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>

另外一个选择 https://v3.vuejs.org/guide/events.html#methods-in-inline-handlers:

有时我们还需要在内联语句处理程序中访问原始 DOM 事件。您可以使用特殊的 $event 变量将其传递到方法中：

<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

// ...
methods: {
  warn: function (message, event) {
    // now we have access to the native event
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

干杯:)