Ingrese con el evento @keyup que no funciona en Vue

Solución:

los click evento ya se desencadena con el INGRESAR clave (también se dispara con Espacio en algunos navegadores, como Chrome para escritorio). Entonces, su código solo necesita un @click="callEvent" y todo funciona bien ya que el foco ya está en el botón:

var app = new Vue({
  el: "#app",
  methods: {
    callEvent() {
      console.log("Event called");
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<div id="app">
  <button @click="callEvent">Enter</button>
</div>

Si quieres eso INGRESAR activa el botón incluso si no está enfocado, debe vincular el evento al window objeto, que se puede hacer dentro del mounted manipulador:

var app = new Vue({
  el: "#app",
  methods: {
    callEvent() {
      console.log("Event called");
    }
  },
  mounted() {
    window.addEventListener('keyup', function(event) {
      if (event.keyCode === 13) { 
        app.callEvent();
      }
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<div id="app">
  <button>Enter</button>
</div>

Recuerda que si estás usando Componentes de un solo archivo, la instancia está expuesta por el this palabra clave, que se puede utilizar para llamar a métodos de componentes dentro del controlador deseado:

export default {
  methods: {
    callEvent() {
      console.log('Event called')
    }
  },
  mounted() {
    window.addEventListener('keyup', event => {
      if (event.keyCode === 13) { 
        this.callEvent()
      }
    })
  }
}

Los botones no tienen evento de keyup. Incluso cuando tenga el foco en el botón y presione enter, se considerará un evento de clic, en lugar de keyup.enter.

Intente vincular el evento a una entrada y funcionará.

Alternativamente, puede usar jQuery (o Plain JS) para enlazar para el evento keydown en el body elemento, y active el método Vue llamando app.callEvent().

var app = new Vue({
  el: "#app",
  methods: {
    callEvent() {
      console.log("Event called");
    }
  },
  mounted() {
    var self = this;
    window.addEventListener('keyup', function(event) {
      if (event.keyCode === 13) { 
        self.callEvent();
      }
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<div id="app">
  <template>
  <div>
    <button @click="callEvent"> Click </button>
  </div>
  <input type="text"  @keyup.enter="callEvent" />
</template>

</div>

_{Actualizado para usar mounted en lugar de confiar en jQuery, según la respuesta de Erick Petrucelli, ya que permite referirse al componente Vue sin la variable global.}

Experimenté resultados inconsistentes al usar JS nativo con window.addEventListener. VueJS admite de forma nativa la modificación del comportamiento de los eventos del teclado https://vuejs.org/v2/guide/events.html#Key-Modifiers

Esto también funcionó mucho mejor en mi caso debido a que necesitaba un comportamiento separado para la tecla de tabulación.

Su entrada puede verse así con modificadores personalizados en cada tecla arriba | abajo

    <input 
        type="text" 
        class="form-control" 
        placeholder="Start typing to search..." 
        v-model="search_text" 
        @focus="searchFocus" 
        @blur="searchFocusOut"
        v-on:keyup.enter="nextItem"
        v-on:keyup.arrow-down="nextItem"
        v-on:keyup.arrow-up="nextItem"
        v-on:keydown.tab="nextItem"
    >

Luego, dentro de NextItem, puede hacer referencia al evento y obtener cada tecla … o escribir una función separada para cada modificador de tecla.

---

---

Utiliza Nuestro Buscador