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 w

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

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

  {{test}}
  

    Submit!