Listening to Click and Keyboard Events in Vue.js

Event listeners are triggered when a user interacts with the DOM. Usually a block of code is executed after an event listener triggers, and some sort of change on the website occurs. Event listeners are most commonly activated when a user clicks or hits certain keys on the keyboard.

Created event listeners in Vue.js requires the use of the directive, v-on.

<button v-on:click="nameOfFunction">Button Name</button>

In Vue.js the directive v-on has a shorthand that replaces the text “v-on” with an @.

<button @click="nameOfFunction">Button Name</button>

The rest of these examples will make use of v-on’s shorthand method. Below is one way the click event listener can be set up.

<div id="app">
 <button @click="countNumbers">Click to Count</button>
 <p>{{ counter }}</p>
</div>

<script>
   new Vue({
     el: "#app",
     data: {
       counter: 0,
     },
     methods: {
       countNumbers: function(){
         this.counter++;
       }
     }
   })
</script>

In the example above a button with the label “Click to Count” uses a click event listener that calls the method countNumbers. In the Vue methods countNumbers triggers a function that updates the counter variable by one. In data, counter is set to 0, so the count will begin at 0. In the p tags under the button the counter is displayed. If a user clicks on the counter button, the counter will update in real time.

Clicks aren’t the only type of event listener that can be accessed in Vue.js, there are many key commands that can be triggered by a user as well. Below the counter in the plain old HTML add the following.

<div>
 <label>Key Up Event Listener Test</label>
 <input type="text" @keyup="keyMessage">
</div>

And in the Vue instance, add the following method below the countNumbers function.

keyMessage: function(){
 alert("Key Event Listener Triggered");
}

In the HTML, the v-on event listener calls the method keyMessage. The keyMessage triggers an alert popup with a message, everytime a person releases a key on the keyboard. If you really want to test this, hold down a key for an extended period of time, and when you lift your hand off the keyboard the message will finally be triggered.

A similar event listener can be used for holding the key down, below the keyup input field, add the following.

<div>
 <label>Key Down Event Listener Test</label>
 <input type="text" @keydown="keyMessage">
</div>

Again the v-on event listener calls keyMessage. This time the alert popup is triggered when any key is pressed.

The keyup and keydown alerts can get annoying. That’s why Vue.js has key modifiers, which are built in methods that can be chained on to an event listener.

<div>
 <label>Key Up Enter Modifier Event Listener Test</label>
 <input type="text" @keyup.enter="keyMessage">
</div>

The key modifier .enter is added to the v-on:keyup event listener. Now the alert message will only be triggered after a person hits and releases the enter key.

Additional key modifiers for spaces, tabs, etc. can be found in Vue’s documentation.

The entire project that’s been built is pasted below.

<div id="app">
 <button @click="countNumbers">Click to Count</button>
 <p>{{ counter }}</p>
 <div>
   <label>Key Up Event Listener Test</label>
   <input type="text" @keyup="keyMessage">
 </div>
 <div>
   <label>Key Down Event Listener Test</label>
   <input type="text" @keydown="keyMessage">
 </div>
 <div>
   <label>Key Up Enter Modifier Event Listener Test</label>
   <input type="text" @keyup.enter="keyMessage">
 </div>
</div>

<script>
 new Vue({
   el: "#app",
   data: {
     counter: 0,
   },
   methods: {
     countNumbers: function(){
       this.counter++;
     },
     keyMessage: function(){
       alert("Key Event Listener Triggered");
     }
   }
 })
</script>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s