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

onSubmit should be a function within your methods property on the vue instance. I.e

methods: {
  onSubmit () {
    // DO Something
  }
}

Then as the docs say, using <form v-on:submit.prevent="onSubmit"></form> is correct. I use this in my app.

See the example below. The message will change once the button is clicked without a page refresh.

var vm = new Vue({
  el: '#app',
  data () {
    return {
      test: 'BEFORE SUBMIT'
    }
  },
  methods: {
    onSubmit () {
      this.test = 'AFTER SUBMIT'
    }
  }
});

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  {{test}}
  <form v-on:submit.prevent="onSubmit">
    <button>Submit!</button>
  </form>
</div>

Answer 2

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

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