Не удалось добавить слушатель @keyup к компоненту макета - PullRequest
Новая
       19

Не удалось добавить слушатель @keyup к компоненту макета

0 голосов
/ 31 декабря 2018

Итак, у меня есть внешний макет default.vue в архитектуре nuxt.Я пытаюсь добавить @keyup.esc="test" к внешнему элементу 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...');
    },

метод тестирования никогда не запускается, что меня смущает.

Ответы [ 2 ]

0 голосов
/ 31 декабря 2018

Событие keyup будет обнаруживаться div только тогда, когда у div есть фокус, поэтому вам нужно установить tabindex, чтобы сделать его фокусируемым, и вы должны дать ему фокус. 

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>
0 голосов
/ 31 декабря 2018

если вы посмотрите документацию вы увидите, что @keyup используется во входах.В вашем случае - вы используете это, чтобы разделить, и нет никакого фокуса на этом, так что keyup не будет возможен.Однако вам нужно добавить некоторые вещи, чтобы это работало.Пожалуйста, прочитайте это

...