Not able to add @keyup listener to layout component

Question

So I have my outer default.vue layout in nuxt architecture. I'my trying to add @keyup.esc="test" to outer element of default.vue:

<template>
    <div @keyup.esc="test">
        <navigation></navigation>
        <nuxt/>
        <transition name="fade">
            <overlay-modals v-if="showModalLogin || showModalRegister"></overlay-modals>
        </transition>
        <transition name="zoom">
            <div class="modal__outer" v-if="showModalRegister || showModalLogin">
                    <modal-login v-if="showModalLogin"></modal-login>
                    <modal-register v-if="showModalRegister"></modal-register>
            </div>
        </transition>
    </div>
</template>

methods: {
    test() {
        alert('come on...');
    },

test method is never fired which makes me confused.

score 1 · Answer 1 · edited Jul 16 '22 at 00:37

1

if u look into documentation u will see that @keyup used in inputs. In your case - u are using this to div, and there is no focus on it so keyup will not possible. However u need to add some stuff to make it working. Please read this

edited Jul 16 '22 at 00:37

tony19

125,647
18
229
307

answered Dec 31 '18 at 12:14

webmint

219
1
4

Tabindex doesn't help me. – BT101 Dec 31 '18 at 12:41

score 1 · Accepted Answer · answered Dec 31 '18 at 13:18

1

The keyup event will only be detected by the div when the div has focus, so you have to set tabindex to make it focusable, and you have to give it focus.

new Vue({
  el: '#app',
  methods: {
    test() {
      console.log("Come on");
    }
  },
  mounted() {
    this.$el.focus();
  }
});

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app" @keyup.esc="test" tabindex="0">
  Here is my div
</div>

answered Dec 31 '18 at 13:18

Roy J

42,522
10
78
102

Of course. It's just another way to get at the HTML element. – Roy J Dec 31 '18 at 15:26
But it lose focus after I click something that doesn't lay in this default.vue layout. – BT101 Dec 31 '18 at 17:33
That is how focus works. You may need another approach, putting the event handler on the window. It is not clear when the events should be detected and when they should not. – Roy J Jan 01 '19 at 00:52

Not able to add @keyup listener to layout component

2 Answers2