A common task you have to do when working on JavaScript applications is preventing default browser behaviour, probably the most common situation you find yourself in with this is when you need to submit a form. This is needed in JavaScript development because the processing of the form will most likely be dealt with by an API. Therefore we don't want the browser to submit a POST request to the action attribute of the form as we want to change the submit functionality. This can be done in jQuery by using e.preventDefault() at the start of your function.
$('form').submit(function (e) {
e.preventDefault();
});
So let's look at how to do this with VueJS. This is done by using the submit event handler by using the v-on:submit directive. Then we can add a modifier to the submit event of .prevent.
<form v-on:submit.prevent="onSubmit"></form>
This code will not submit the form but will run the onSubmit function on the submit event of the form. Have a look at the demo where we don't submit the form but display the typed input on the page.