Using event modifier .prevent in Vue to submit form without redirection

Question

I'm using Vue in my application and I would like to know how to submit a form but avoid redirection. According to the official Vue doc it can be achieved in the following way:

<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>

Here is my part of my form:

<form class="myForm" action="/page" method="post" @submit.prevent="onSubmit">
    <input name="email" type="email" placeholder="e-mail" v-model="email">
    <button @click="myFunction()">

It sorta works in the sense that the page is no longer redirected but I get an error saying that onSubmit method is not defined. So What I don't understand is how I should define it. On the other hand I could just write @submit@prevent but as far as I understand it completely prevents submission and that's not what I'm looking for. Is there a proper way to do this without ajax, axios and that sort of technologies? What I want is myFunction to execute and form to submit but I would want to avoid redirection.

Answer 1

Just use @submit.prevent (without any equal signs).

Then, define @click="doAction()" on the button.

Answer 2

Try @submit.prevent="myFunction()", and your button could instead be <input type="submit" value="Submit"/>. The submit type will trigger the form to submit, and the submit.prevent will prevent the default submit behavior and execute myFunction as desired.

This has the additional benefit of triggering form validation for required input fields!

Answer 3

<form @submit.prevent="saveData()" method="post"> <!-- Add all the input filed --> <button type="submit"> Save </button> </form>

This will avoid redirection of the form also we can validate input fields.