VueJs - preventDefault() on form submission

Question

I need to submit a form programmatically, but I need it to preventDefault as well.

Right now I have the following:

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

It is working fine, but I cannot prevent default on the submit which in the end, refreshes the page.

Answer 1

Short answer

You can add the .prevent modifier to the @submit (or any other v-on you're using), like this:

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

In the case of submitting a form, this will prevent the default behavior of refreshing the page.

Long answer

There are several ways to modify events.

From the Vue 3 docs:

It is a very common need to call event.preventDefault() or event.stopPropagation() inside event handlers. Although we can do this easily inside methods, it would be better if the methods can be purely about data logic rather than having to deal with DOM event details.

To address this problem, Vue provides event modifiers for v-on. Recall that modifiers are directive postfixes denoted by a dot.

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

Another option:

Sometimes we also need to access the original DOM event in an inline statement handler. You can pass it into a method using the special $event variable:

<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)
  }
}

Cheers :)

Answer 2

Didn't quite understand @Armin Ayari's answer, for instance why the code would have to be in the methods object? Anyway in Vue this is what worked for me:

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

This blocked the page from refreshing and called myMethod instead.

You don't even need the ref. Understood this is an old question, but I found myself here after debugging, and found my form tags were simply mis-placed.