All language subtitles for 14. Exploring Event Modifiers

Now that we got the basics about events down,

let's talk about event modifiers,

which is another useful feature built into Vue.

Here's an example for an event modifier

that can sometimes be useful.

Let's say you had a form HTML element,

in there you had some input and you had a button

that says, sign up, whatever,

if you reload, you have that here.

Now the problem you'll have by default,

if you leave it like that,

even if it's in the Vue controlled HTML part

is that when you click this button, this page will reload.

And the reason for that is that the browser default

for a form with a button like this is to submit that form

and send an HTTP request to the server serving this app.

In this case we have no such server,

we're running this locally,

but still the browser simply sends a request

to our local machine therefore, you could say.

Now, of course, we have no code in place

to handle this request.

Now we'll get there later in this course,

but typically with frameworks like Vue,

you wanna prevent this browser default

and instead you wanna handle this manually

in JavaScript with help of Vue in your Vue app

and you wanna read the user input there, validate it

and then send it manually to a backend server

and store it in a database, for example.

So you wanna prevent that browser default

of automatically sending it.

Now, there are two ways of doing that.

One of them is cool and the other one is well more obvious,

I would say.

You can listen to the submit event here,

which again is a default browser event

to which you can listen on form elements.

Then we could have a method here,

submit form like this

at which we can point here, submit form.

Now we're telling Vue that whenever the form is submitted,

submit form should be executed.

And here we could do whatever you want.

For example, showing alert submitted.

Now right now, the problem is that we still have

the browser default.

If I click this, I get the alert,

but the page reloads thereafter, and when the page reloads,

that means we lose all our data, right?

If I had a counter here and I click sign up,

you'll see that all the data is lost

because of the page reload, the Vue app restarts

so to say.

So we haven't solved the problem,

but remember that we get this default event object,

I talked about that in the last lecture.

Now we can call prevent default on that.

This is a default browser mechanism,

it's built in JavaScript,

which is totally independent from Vue.

Even if we just used Vanilla JavaScript

on that default event object, which we get,

we could call prevent default.

And this would tell the browser that the form

should not be submitted,

that we don't want that browser default.

So now if I reload, I can change my counter,

click sign up, we see the alert and the counter still

is there because now that browser default

has been prevented.

This works and there's nothing wrong with it,

but Vue has a nicer way for us.

We can remove all that code

and instead use a so-called event modifier.

There are certain built in modifiers,

which you can connect to events you're listening to,

let's say to change that event behavior,

and you add such a modifier with a dot after the event name

after v-on.

So v-on: then the event name and then a dot

if you want the modifier.

Now, there are only a couple of supported modifiers.

You can find a full list in the official docs.

For example, there is a prevent modifier and this modifier,

which is built into Vue will prevent the browser default.

So it will basically do what we did manually a second ago

just with less code.

There always is a stop modifier for stopping propagation,

but here we need to prevent modifier.

And with data, if you reload, I can sign up.

We see that alert and still the page doesn't reload,

thanks to this modifier.

So that's nice to know, and that will come in handy later.

We don't just have such event modifiers

to change the event and browser behavior,

we also have modifiers we can connect to events

to change when the event occurs.

And one example would be our buttons.

Let's say for whatever reason,

we only wanna subtract five if the user right clicks

on the button.

The default of course is to react to a left click.

But if you want it to react to a right click,

we could add a modifier here as well.

And we can set it to right.

Alternative values are left, which you don't need to specify

because it's the default, middle and well, right.

And this tells Vue that here,

you only wanna react to a right click.

So when you're using a mouse event like click,

you can use the right, left and middle event modifiers

to change which mouse button triggers this event.

So if we now save this, you see,

I can add 10 by clicking with the left key

but if I click on subtract five

with the left key, nothing happens.

If I use the right mouse button, though,

which you can tell I'm doing,

because my context menu opens up,

now the counter gets smaller.

Of course we can argue whether that's useful here,

but it's definitely useful to be aware of those modifiers.

And there's a last kind of modifiers.

And that would be key modifiers

when you're listening to keyboard events

like here on the input element.

Currently we're updating the name upon the input event here,

so on every keystroke.

Now let's say we wanna update the internally stored name

sold as name property with every keystroke,

but the name that's being output here should only be updated

when the user hits enter on this input element.

Well, for that, we could have another data property

confirmed name, which is the actual name

we wanna output here.

So here we got the confirmed name in this paragraph

and the confirmed name, unlike the internally stored name,

which is just named name,

the confirmed name should only update here

when the user hits the enter button in this input field.

For that, we can add another event listener

on the input element.

Yes, you can have more than one.

So here we are listening to input with v-on input.

Now I'll add another v-on directive and also listen

to the key up event,

which is triggered when a key is pressed and released again.

And here, I wanna trigger a method which I have yet to add,

which I'll call confirm input or confirm name,

whatever you want.

The goal here in confirm input

is to set this confirmed name,

so this new data property we added,

which we're outputting in this paragraph,

set this confirmed name equal to the internally stored name,

which we update with every keystroke.

So here v-on key up, I wanna point at confirm input.

Now currently this would fire whenever

any key is pressed and released.

So currently, if I reload here, we would basically have

the same behavior as before with every keystroke

the input event but then also the key up event is triggered

and therefore we basically confirm the input

with every keystroke.

So that's probably not the final behavior we want.

Instead, we can use another modifier with a dot here

to tell Vue that since this is a keyboard event,

we only wanna react,

we only wanna trigger this event upon certain special keys

that are pressed and released.

For example, the enter key,

you could also listen to control or shift or page down,

all keyboard keys are possible here,

but I wanna listen to the enter key.

And with that, I'm saying, hey, when the enter key

is pressed and released,

then confirm input should be executed.

So now if I save that and reload,

I can enter Maximilian here and we see nothing in that

green box, but if I placed my cursor in here and hit enter,

now we see that output here.

So these are event modifiers.

Now I'm quickly going to auto format this HTML code

with the format document key combination here

in Visual Studio Code to make this more readable,

but it's the same code as before

just structured differently.

So that's the input we just worked on,

we have the input event and the key up event

with the enter modifier to change when

confirm input executes.