Skip to Content
Learn
Vue Forms
Form Event Handlers

As you may have seen previously in your learning journey, every web app experience consists of a series of events and responses to those events. Everything that can happen in a web app, from a user clicking a button to a piece of information coming back from a database, is considered an event. As seen in MDN’s list of events, forms have two built-in events that we need to handle: submit events (when a submit button is pressed to submit the final form) and reset events (when a reset button is pressed to reset the form to its initial state).

As we saw briefly in Introduction to Vue, Vue uses the v-on directive to add event handlers. Event handlers will respond to the specified event by calling the specified method.

We can use the v-on directive on <form> elements to add form event handling functionality, like so:

<form v-on:reset="resetForm"> ... <button type="reset">Reset</button> </form>
const app = new Vue({ el: '#app', methods: { resetForm: function() { ... } } });

In this example, we added a reset event handler to our form. We specify the type of event to respond to after a colon, :, and then specify the method to call as the value of the directive. When a user clicks the “Reset” button, a reset event will be triggered (because the type of the button is reset), the <form> event handler will see this event appear, and the resetForm method will be called in response.

Note: A common shorthand for event handlers involves replacing v-on: with @, like so:

<form @reset="resetForm"> ... </form>

Both syntaxes are acceptable and used in Vue applications.

Instructions

1.

Let’s add reset and submit event handlers to our form.

In Vue Instances, we created a method called resetFields that resets all of the Vue app’s data. We will use this for our reset event handler. Using either provided syntax, add a reset event handler that calls resetFields when a reset event is fired.

Once you’ve implemented your handler, try filling out some of the form fields and then clicking the “Reset” button. The page should no longer refresh when you click the button and instead, all of the fields will clear.

2.

Next, let’s add our submit event handler.

We’ve added a method to our Vue app called submitForm. This method presumably will process our Vue form data in some way — potentially adding it to a database. The logic of this method is universal to all JavaScript, not Vue, and thus is beyond the scope of this lesson. We suggest you take our lesson on JavaScript Requests if you want to learn more about how to implement this type of method. For the purposes of this lesson, we will leave the body of this method empty.

Add a submit event handler that calls submitForm in response to submit events.

Try testing your event handler out by filling out some of the form and then clicking the “Submit” button. Even though nothing should happen, the page refreshes! This is a bad user experience that we will learn how to fix in the next exercise.

Folder Icon

Sign up to start coding

Already have an account?