Three Practical Examples to Learn Vue.js

4.2 Handling Events

The way that we handle events has evolved over the many years of web development. I mean, back in the 1990s when we first got JavaScript and we could use it with forms, which was a very wonderful thing, well, we used attributes. So if we wanted to handle the click event for the button Elements, we would use the onclick event handler and then we would specify the JavaScript that we want to execute. Well, a few years later, the people that overthink these things really [LAUGH], decided that that was a bad way of going about it. We need to separate our markup from our JavaScript because that makes our lives easier. It makes it easier to maintain. And yes, there is some merit to that argument. So then instead of using the onclick event listener, we would then retrieve the element from the dom, and we would call a method. And for legacy Internet Explorer, that was attachevent. For all other browsers, that was addEventListener. And everything was great and everything was good, yada, yada, yada, yeada. But then we started transitioning into this realm of component driven development. And this particular approach started to not make a whole lot of sense because when we create a component we are intermingling markup with JavaScript. And it's different in this case. Because what we are doing is creating a complete and contained component. It's not like this is a site-wide thing. We just have a single file that's just a small portion of the overall page that's rendered in the browser. So maintenance really isn't that big of an issue, because everything is just right here for us to work with. So it kind of makes sense to go ahead and start intermingling our markup and our code. And that's exactly what we do with Vue. So here is how we can handle the click event for our button element. We say v-on, that is the directive. We follow that up with a colon, and then a name of the event that we want to handle. =, and then the value of that directive. So it's a lot like onclick, except that there's a few extra things. We have to specify that this is a Vue directive, and then so on and so forth. Now one thing that we would typically always do is prevent the default action from occurring. Whenever we click on the Submit button, that's actually going to submit the form and most of the time we don't want to do that because we want to go through our own validation processes and things like that. And then we would submit the form through AJAX. Well, in that case, we would use the event objects. So we would have our event handler that would have an event object, and we would use that prevent default method. Well, we don't have to do that because the whole thing behind Vue is that we do as much through our directives as possible. So all we have to do then is add a modifier to our directive. And we do that with a dot. So we say v-on:click.prevent. And that will prevent the default action from occurring. So let's save this. Let's make sure that that is going to be loaded in the browser. So we will do a hard refresh, and whenever we click on the button we're going to see that it does not submit. So let's have some code execute. Let's use an alert, and we will say hello, and that will be it. Now this is not going to work. Let's pull up the console. And let's click on the Send Message button. We see the error and we can see that here _vm.alert is not a function. What does that mean? Of course, alert is a function. We use it everywhere. And that is because whatever we use for our code for the directives is automatically assumed to be a member of the component. So we talked about the data props in the previous lesson and how we don't have to say this and then whatever our data prop is. Well, that's because Vue is going to assume that whatever we use in our directives is actually part of the component Itself. So this is trying to execute a method called alert on this component, and one doesn't exist. And we're not going to write it, because instead, we're going to have a method that actually means something, like submitForm. One other thing, if you'll remember, whenever we first started talking about the v-bind directive, and that there was a shorthand for that and that was simply a colon. Well, we have a shorthand for v-on as well, and it's actually shorthand for v-on colon. If we use an at sign followed by the name of the event, that is the same thing. And I like this approach because it kinda sounds like at the click prevent the default action from occurring, and execute the code that we specify. Now there's another modifier that I should point out. With a standard event object, we can also stop the propagation of that event, and we have a modifier to do that. It's simply .stop. So you can chain these modifiers if you need to. We aren't in this case, we're just going to prevent the default action from occurring. And we are going to execute a method called submitForm. So now we need to define this method. And it makes sense that we do that in the component's JavaScript. However, what we do is we have a property called methods. And all of our custom methods are defined inside of here. So this is where we would have our submitForm, and then we would execute our code. So if we wanted to issue an alert here, we can't because this code is going to execute and we have access to the global window object here. So we can say alert('hello form vue'), and whenever we actually execute this, we will see the alert box at the top. Now one thing to note, it can get confusing at first between the custom methods that we write and then the lifecycle hooks that we hook into, like created or mounted. We don't want to put these lifecycle methods inside of the methods property because then it's not going to behave the way that we would expect it to. So anytime that we need a custom method for our purposes, we define them inside of the methods property. And of course, we can have as many as we wanted. Now one last thing, this submitForm is an event handler. That means that the standard event object is being passed to this. So if we wanted to get any information about that event that occurred, we could use the standard properties and methods. So if we wanted to get the Submit button we just clicked, we know that's the target property. If we wanted to get the type of event, that is the type property. However, if we wanted to change our code and our directive to execute submitForm and then we pass in some data, well, that changes things. Because what we are doing then is actually calling the submitForm method, and then passing it a value. So in that particular case, whatever we specify as our parameter is going to have the value of what we passed to the method. But in this particular case, we don't need to do that. We are just going to say submitForm. It's going to execute that method whenever we click on the button. And we are good to go there. So that's essentially how you handle events in your Vue components. In the next lesson, we're going to start talking about binding data to our form controls, because being able to click a button is great, but it's useless if we can't work with the data in the form.