Vue.js Events - Event Modifiers - Keyboard

If you're just getting started with this series of Vue.js posts, you should start with the Vue.js Starter Page.

The code below demonstrates event modifiers related to the keyboard. There's a complete list on the vue.js website https://vuejs.org/v2/guide/events.html#Key-Modifiers. Just like the previous post that used mouse events, you'd use the event modifiers in the "v-on:" event handler for this post on keyboard events.

In the code below the input text fields have been wired to Vue.js method that will display a message to the console.log when the user clicks in the form field, types any value and then hits the Return button on the keyboard.

Simple but effective. You can also daisy.chain modifiers like "alt.enter" so that the user has to click the alt+enter keys at the same time.

Keyboard Events



<!doctype html>

<html>
<head><meta charset="UTF-8"><title>VueJS</title>
<script src="https://unpkg.com/vue@2.3.0"></script>

</head>
<body>

<div id="app"> <h3>Keyboard Events</h3> <label>Name: </label> <input type="text" v-on:keyup.enter="logName" /> <label>Age: </label> <input type="text" v-on:keyup.enter="logAge" /> </div> </body> <script> var vm = new Vue({ el:'#app', data: { age: 25 }, methods: { logName:function(){ console.log("You entered your name!"); }, logAge:function(){ console.log("You entered your age!"); } } }) </script> </html>

Link your website to this page! Copy and paste the URL below:
http://www.cfsnap.com/vue-js/vue-js-events-event-modifiers-keyboard/