Question

86

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

rated 0 times [ 91] [ 5] / answers: 1 / hits: 56046 / 7 Years ago, fri, december 29, 2017, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

gonzaloulyssess

Add To Favorites

Follow

Total Points: 225

Total Questions: 114

Total Answers: 112

Location: Iraq

Member since Fri, Jun 5, 2020

4 Years ago

answered 7 Years ago braeden · Accepted Answer

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>