Event modifiers

Vue makes it easy to listen forspecifickeys by offeringmodifiersto thev-ondirective. Modifiers are postfixes denoted by a dot (.), for example:

<input v-on:keyup.enter="handler">

As you'd probably guess, the.entermodifiertells Vue to only call the handler when the event is triggered by theEnterkey. Modifiers save you from having to remember the specific key code, and also make your template logic more obvious. Vue offers a variety of other key modifiers, including:

• tab
• delete
• space
• esc

With that in mind, it seems like we could close our modal with this directive:

v-on:keyup.esc="modalOpen = false"

But then what tag do we attach this directive to? Unfortunately, unless an input is focused on, key events are dispatched from thebodyelement, which, as we know, is out of Vue's jurisdiction!

To handle this event we'll, once again, resort to the Web API.

app.js:

var app = new Vue({ 
  ... 
});

document.addEventListener(</span>'keyup', function(evt) { if (evt.keyCode === 27 && app.modalOpen) { app.modalOpen = false; } });

This works, with one caveat (discussed in the next section). But Vue can help us make it perfect.