Using event modifier .prevent in Vue to submit form without redirection
Just use @submit.prevent
(without any equal signs).
Then, define @click="doAction()"
on the button.
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>