Como dice el título, no puedo hacer que mi evento se active.
@keydown="keyPressed($event)"Así es como se ve actualmente, pero lo probé con tabIndex y lo agregué en el montaje de esta manera:
mounted(){ let container=document.querySelector('#course') container.addEventListener('keydown',(e)=>{ console.log(e) }) }Modelo
<div id="course" tabindex="0" @keydown="keyPressed($event)"> <div class="snake"></div> </div>Por lo tanto, nada funciona. ¿Qué estoy haciendo mal?
Creo que en vue, una mejor práctica sería seleccionar el elemento usando ref en lugar de querySelector especialmente si se puede hacer referencia a él en el mismo componente.
Además, el uso @keydown simplemente adjunta un detector de eventos keydown al elemento, por lo que no es necesario agregar addEventListener .
<script setup> import { onMounted } from 'vue'; const courseDiv = $ref(null); const keyPressed = (e) => { console.log(e); } </script> <template> <div ref="courseDiv" id="course" tabindex="0" @keydown="keyPressed($event)"> <div class="snake">snek</div> </div> </template>