Key event handlers in Vue

What I learned about setting event handling for keys in Vue is:

1. Add the v-on directive (shorthand is @) to the element (for example; @keyup, @keydown).


2. Set focus on the element (add the property tabindex="0").


3. To set focus programmatically with .focus(), if the action or event that initiated the change in focus causes the DOM to change (it usually does) you must set focus using $nextTick to wait for the DOM to update first.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<div class="notify-item-list" v-for="(entry, index) in category.entries" :key="entry.id">     <a href="#" @click="selectItem(category.entries, index)" class="text-black" :class="{ 'text-bold': isUnread(entry) }">{{ entry.title }}</a>     <div id="notification-modal" tabindex="0" ref="notifyModal" @keyup="navKeys" class="item-detail modal" :class="{ 'is-active': showItemDetail(entry) }">   methods: {     selectItem: function ( entries, index ) {         this.selectedItemIndex = index;         this.$nextTick( () => {             let input = this.$refs.notifyModal[index];             input.focus();         }),     navKeys: function ( e ) {         switch( e.keyCode ) {             case 27: // esc                 this.hideItemDetail();                 break;             case 37: // left                 this.prevNotificationDetail(this.category.entries);                 break;             case 39: // right                 this.nextNotificationDetail(this.category.entries);                 break;         }     } }

It’s a little more involved when multiple similar elements are created with the v-for directive, but you can simplify it by adding the ref="whatever" attribute, then use the index of the array to find the right object and its $refs.whatever, for example this.$refs.whatever[index]. Here’s a discussion of how to do this with v-for:

https://laracasts.com/discuss/channels/vue/vue-set-focus-to-input-created-by-v-for?page=1

See the 4th, 5th, and 6th replies by Kazuya.Gosho, MacPrawn and lukas.pierce. The last one was the most helpful. Anyway, it works like a charm. Feels a little kludgy, but considering how the user is interacting with the DOM it makes sense.