Tengo un botón de confirmación, que también debería activarse mediante un evento de entrada.
Básicamente, esperaba que esto pudiera funcionar:
<someComponent @keyup.enter="handleConfirm" /> ... methods: { handleConfirm(event) { console.log("works") } }Pero no es así. Aparentemente, este enfoque solo funciona con campos de entrada.
¿Cómo puedo escuchar un evento keyup en Vue en cualquier elemento/componente?
EDITAR Para aclarar: Cualquier elemento/componente incluso fuera de foco.
El evento de clic ya se activa con la tecla ENTRAR (también se activa con la barra espaciadora 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
Si desea que cualquier ENTER active el botón incluso si no está enfocado, debe vincular el evento al objeto de la ventana, que se puede hacer dentro del controlador montado.
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>Puede hacer esto: <someComponent @keyup.enter="handleConfirm($event)" />
methods: { handleConfirm(event) {} }