In a Vue app, Key Up Event fired on an input element when tabbed into. Why?

Question

Here is the HTML code,

<div id="vue-app">
       <h1>data binding</h1>
       <label>Name:</label>
       <input type="text" v-on:keyup="logName" />
    
       <label>Age:</label>
       <input type="text" v-on:keyup="logAge" />
    
</div>

Here is the script:

new Vue({
    el: '#vue-app',

    methods: {
       logName: function() {
          console.log("You entered your name");
       },

       logAge: function() {
           console.log("You entered your age");
       }
    }
});

Now when I tab into the "Age" input field, it fires the "keyup" event. Why is that so?

Answer 1

tab is a key that fires the v-on:keyup event, use v-on:input event instead of it:

<div id="vue-app">
       <h1>data binding</h1>
       <label>Name:</label>
       <input type="text" v-on:input="logName" />
    
       <label>Age:</label>
       <input type="text" v-on:input="logAge" />
    
</div>

Answer 2

This is expected behaviour, since any key press trigger a keyup event. To prevent tab key from triggering this event you could try:

methods: {
       logName(e) {
          if(e.keyCode === 9) return
          console.log("You entered your name");
       },
       logAge(e) {
           if(e.keyCode === 9) return
           console.log("You entered your age");
       }
    }