Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.
In this article, we’ll look at how to handle various events with Vue.js and modify an event handler’s behavior.
Key Modifiers
When listening to keyboard events, we often want to check for specific keys. To do this, we can add the key name as the modifier of the v-on directive.
For example, we can use it as follows:
src/index.js :
new Vue({
el: "#app",
data: {
name: ""
},
methods: {
submit() {
alert(this.name);
}
}
});
index.html :
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> <body>
<div id="app">
<input v-model="name" v-on:keyup.enter="submit" />
</div>
<script src="src/index.js"></script>
</body>
</html>
The code above will watch for presses for the enter key when the input if focused. Then when we press Enter and release the key at that time, we’ll get whatever’s typed into the input displayed in the alert box.
v-on:keyup.enter=”submit” only checks for when the Enter key is released.
For key names that are more than one word, we convert it to kebab case.
For example, if we want to listen to the keyup event of the page up key, we write:
<input v-on:keyup.page-up="onPageUp">
Then when the page up key is released, onPageUp is called.
Key Codes
We can also pass the key code as the modifier of v-on . For example, if we want to listen to the event when the Enter key is released after it’s pressed, we can write the following:
src/index.js :
new Vue({
el: "#app",
data: {
name: ""
},
methods: {
submit() {
alert(this.name);
}
}
});
index.html :
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> <body>
<div id="app">
<input v-model="name" v-on:keyup.13="submit" />
</div>
<script src="src/index.js"></script>
</body>
</html>
However, the use ofkeyCode events are deprecated so it may not be supported in new browsers.
Aliases for commonly used key codes are included in Vue. They include:
.enter.tab.delete(captures both “Delete” and “Backspace” keys).esc.space.up.down.left.right
Some keys, like arrow keys and .esc have inconsistent values in IE9, so these built-in aliases should be preferred if our app supported IE9.
We can also define our own key code aliases as follows:
Vue.config.keyCodes.f3 = 114
Then we can use:
v-on:keyup.f3
in our app.
System Modifier Keys
Since Vue 2.1.0 or later, we can use modifier keys to trigger mouse or keyboard event listeners only when the corresponding modifier keys are pressed:
.ctrl.alt.shift.meta
The meta key is the command key on Macintosh keyboards. On Windows keyboards, the meta key is the windows key. On Sun workstation keyboards, it’s solid diamond key.
For example, if we want Alt-S to be the shortcut key to display an alert with what we typed, we can write the following:
src/index.js :
new Vue({
el: "#app",
data: {
name: ""
},
methods: {
submit() {
alert(this.name);
}
}
});
index.html :
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> <body>
<div id="app">
<input v-model="name" @keyup.alt.83="submit" />
</div>
<script src="src/index.js"></script>
</body>
</html>
If we want an alert to pop up when we Ctrl-click on a button, we can write the following:
src/index.js :
new Vue({
el: "#app",
data: {},
methods: {
sayHi() {
alert("hi");
}
}
});
index.html :
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> <body>
<div id="app">
<button @click.ctrl="sayHi">Say Hi</button>
</div>
<script src="src/index.js"></script>
</body>
</html>
Then we get an alert with the word ‘hi’ when we Ctrl-click on the Say Hi button.
The modifier keys have to pressed when the event is emitted in both cases. So in the examples above, Alt or Ctrl have to press in addition to what comes after it.
.exact Modifier
Since Vue 2.5.0, we can use the .exact modifier to control the exact combination of system modifiers needed to trigger an event.
For example:
<button @click.ctrl="onClick">A</button>
will run onClick only when Ctrl is pressed, and if we want to run a method only when Ctrl-click and no other keys are pressed, we can write:
<button @click.ctrl.exact="onCtrlClick">A</button>
Mouse Button Modifiers
Since Vue 2.2.0, the following mouse modifier events can be used:
.left.right.middle
They’ll triggered when a specific mouse button is pressed.
Conclusion
We can listen to one key action or a combination of key actions with key modifiers.
We can reference them by key code or aliases.
Key names that have more than one word have to be converted to kebab case.
We can also listen to exact key combinations with .exact and mouse button clicks with mouse key modifiers.
