Full-Stack Vue.js 2 and Laravel 5

Event modifiers
Vue makes it easy to listen for specific keys by offering modifiers to the v-on
directive. Modifiers are postfixes denoted by a dot (.), for example:
As you'd probably guess, the .enter modifier tells Vue to only call the handler
when the event is triggered by the Enter key. 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 the body element, 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('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.