Vue Modifier Keys

Published on February 27, 2017 by

I hope that you won’t get too confused when I tell you that not only is there something called key modifiers in Vue.js, but there is also something called modifier keys. Modifier keys refer to keys such as control, shift, alt and the Windows or Command key on Mac. With modifier keys, we can trigger an event listener only when one of these keys are pressed. Modifier keys are not limited to being used in conjunction with keyboard events, as we will see in this post.

First, let’s use the keyup event on a text input as we did before, this time with the shift and enter modifiers.

<input type="text" v-on:keyup.shift.enter="myListener">

My simple event listener is only invoked if I press the Shift and Enter keys simultaneously, with the text input in focus.

In this example, we have once again chained multiple modifiers – in this case a modifier key (being the Shift key) and a key modifier (being the Enter key).

I mentioned that modifier keys can be used with mouse events as well. Let’s see this by adding a new button with a click event.

<button v-on:click="myButtonListener">Click Here</button>
new Vue({
	el: '#app',
	methods: {
		myListener: function() {
			alert("You pressed the Shift + Enter key!");
		},
		myButtonListener: function() {
			alert("You clicked the button!");
		}
	}
});

This just displays an alert every time we click the button, which is hardly any fun. If I use the shift modifier key, though, the event listener will only be executed if I click the button while simultaneously holding down the Shift key on my keyboard.

<button v-on:click.shift="myButtonListener">Click Here</button>

Let’s test it out! So if I click the button normally, nothing really happens, but if I do that while holding down the shift key, we now see the alert.

The last modifier key I want to mention, I one named meta. This modifier corresponds to the Command key on Mac keyboards and the Windows key otherwise. Replacing shift with meta on the button would then mean that I would have to press the Command key instead, since I am on a Mac.

<button v-on:click.meta="myButtonListener">Click Here</button>

While this works on a Mac, I haven’t tested it on Windows, but it should work. The reason I say “should,” is that when using these keys, there is always a risk that the operating system or browser has some built-in shortcut for certain key combinations. So if you do want to use the meta modifier key, then be sure to test it out and be aware of any possible collissions with other operating system or application level shortcuts.

Featured

Learn Vue.js today!

Take an online course and become an Vue.js champion!

Here is what you will learn:

  • How to build advanced Vue.js applications (including SPA)
  • How Vue.js works under the hood
  • Communicating with services through HTTP
  • Managing state of large applications with Vuex
  • ... and much more!
Vue.js logo
Author avatar
Bo Andersen

About the Author

I am a back-end web developer with a passion for open source technologies. I have been a PHP developer for many years, and also have experience with Java and Spring Framework. I currently work full time as a lead developer. Apart from that, I also spend time on making online courses, so be sure to check those out!

Leave a Reply

Your e-mail address will not be published.