As the title says, I can't get my event to fire.
@keydown="keyPressed($event)"
This is how it looks currently,but I've tried it with tabIndex and appending in on mount like this :
mounted(){
let container=document.querySelector('#course')
container.addEventListener('keydown',(e)=>{
console.log(e)
})
}
Template
<div id="course" tabindex="0" @keydown="keyPressed($event)">
<div class="snake"></div>
</div>
Hence,nothing works. What am I doing wrong?
I think in vue, a better practice would be to select the element using ref instead of a querySelector especially if it can be referenced in the same component.
Also using @keydown just attaches a keydown event listener to the element, so there is no need to do 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>