We're going to see how we can listen for different events, and they're not limited just to links or buttons. We also can listen to events in forms. I'm going to come down in our html here, and let's add another div, and we're just going to call this our math section. Let's just add h2, and say:

index.html

    <div>
        <h2>Math Section</h2>

        <input type="text">
    </div>

This is a very standard kind of input, and then I also want to have the ability to show the result. So inside of here below here, I'm going to say div, and this is where the results are going to be. What I want to build out is a little math equation.

This is going to be dead symbols, so don't worry if you're not really up on your math or you're not a big fan. What I want to do is I want to have what is called a keyup listener or @keyup.

What this is going to do is it's going to wait until I have typed out some letter on the keyboard, and then as soon as I let that up or as soon as a user lets that up, then it's going to fire off this function. So I'm going to say:

index.html

    <div>
        <h2>Math Section</h2>

        <input type="text" @keyup="square">
    </div>

What this is going to do is this is going to call the square function. Something that we need to go build, and it's going to do that every single time we've typed something into the keyboard. Let's come into app.js. In our method list, let's first remember to add a comma here, and then we're going to create a method called square.

You may think because we are not passing in any kind of arguments here. You may think that square is just going to be a standard method, and it doesn't have access to any data that is not listed in our set of data items; however, whenever you're working with an event listener, you actually have the ability to listen for an event.

This event is something that is automatically passed in whenever the method is called. What we can do is we can pass in an event here, directly into the square method as an argument. Now technically, we could have done this with showImgDetails and altShowImgOptions.

We could have done that with anything that we used a click listener for, but we didn't really need to because those were just buttons. They weren't really passing us data. We were accessing data up top here, but we do have the ability to listen for events and then grab data from them.

So here inside of square, I can say square(evt). Now this event is not a special kind of keyword. We could say e, we could have said event. I like saying evt. One of the reasons why I like using that is because it's more descriptive than just using the letter e. Also, it kind of shows that the word I'm using, or the argument name I'm using, is not a reserved word.

I've had students when I used to actually spell the whole thing out. They would think that event was a reserved word and that it was something that they always had to type. Whenever I use just evt, I think it's really clear that this is just an arbitrary name that I'm picking out, but it's still pretty descriptive.

All that being said, our square method here. Let's first just see what kind of data we have access to. So, I'm going to say:

app.js

    square(evt) {
        console.log(evt.target);
    }

If you are familiar on your browser JavaScript, then you should know that whenever you're working with some kind of event listener that event has a target tied to the event object, and the target has data as well. For right now, let's just print out this target. So here we have square and it's listening for a keyup event.

Let's just see if all of this is working. Click out of the event handling docs. You can see here in our math section: if I say 1, you can see that we've got the target. This is working. As soon as we type our key, and we let up on it.

What's happening is it is going to find that event and then, for right now it just printing out the target for that event. Now if I type 12 it gives us the entire tag.

Now, this is not very helpful, or I should say it's not helpful by itself. Now let's go and instead of just getting the event target, let's get event.target.value. This is something else we have access to. Now if I type 1 you can see that it prints out 1. If I type 2. Now it is 12, 3 and now it's 123.

This is listening for the key up event. Here is a really helpful thing, it is also returning the entire value from our target element. That is very helpful because if it was only returning the key we typed, that wouldn't give us a good idea of what we wanted to do. If I just type 3 there, it returned 3, and then I tried to square 3, I would get 9 when really I want to get 123 squared.

Now that we have access to this, we kind of know what to do. I think I have a pretty good idea of what to do. I'm going to say:

app.js

    square(evt) {
        return evt.target.value **;
    }

You can also do:

app.js

    square(evt) {
        return evt.target.value * evt.target.value;
    }

Both of these are the same thing and you'll get the same result, but just if you're familiar with the two asterisks versus the one. Now, with all this in place, what we can do is we can either just call squareand pass in the event, but what I find the most helpful is I actually want to store this inside of a value. Let's take this and I'm going to say:

app.js

    square(evt) {
        return this.squaredResult = evt.target.value * evt.target.value;
    }

Now if I come to my data I can say:

app.js

new Vue({
  el: "#app",
  data: {
    name: "Kristine",
    imgHeight: 150,
    imgWidth: 150,
    showImg: false,
    smallImg: true,
    medImg: false,
    lgImg: false,
    squaredResult: 0

Let's set it to 0, but we'll be dynamically changing it, as you'll see here in a second. Then you remember when we created that empty div? Now we can call our squared result inside of it.

index.html

    <div>
        <h2>Math Section</h2>

        <input type="text" @keyup="square">
        <div>{( squaredResult )}</div>
    </div>

Now if that is saved, you can see it starts out at 0, which is what we're looking for. Now if I say 2, it's 4. If I say 3, it's 529. If I type in some giant number, it's going to give us the square result. As you can see, it's also quite fast.

This is something that you can do instead of having to rely on some outside service, or you're doing the server side, anything like that. You can do this directly inside of your vue code, just with a few lines, so we're able to have a data element.

We're able to store it inside of our data list, then we can call our method, and then inside of that we have access to the event. Not just the event by itself, but also the data inside of it.

Right here we were able to take the event, multiply the value by itself, which gives us the square of it, and then from there store it and update the current state of the system. Then show that and render it directly on the screen.

That is how you can leverage additional events. Besides just being able to listen for click events, you also can listen for any of the other kinds of events inside of vue.

If you want some more information on that you can just type vue js events. Then you're going to go exactly to where we were before that Event Handler, and then you can go and see all of the different kinds of event options that you have access to.

If you type keyup right here, you can see that they're using in the docs v-on with the colon and keyup. We use the app, which I think is a little bit more intuitive, but you have access to all kinds of different elements.

One other thing that you may note here, we also have the ability to listen for additional parts of keyup. So we have keyup, and we have it by itself, but we can also at things such as enter, specific numbers, or key modifiers, anything like that.

I definitely recommend for you to look at this key modifier documentation, because you'll see some of the other events you can listen to along with ways that you can extend those for your own personal use cases.

Resources

• Source Code
• Vue Event Handling