I had trouble figuring out keyboard events in Vue, so I'm writing this for future reference
<script setup> | |
import { ref } from 'vue' | |
const hover = ref(false) | |
const key = ref('') | |
const events = ref([]) | |
document.addEventListener('keydown', (e) => { | |
key.value = e.key; | |
events.value.push({ key: e.key, hover: hover.value.toString() }) | |
}) | |
</script> | |
<template> | |
<h3> | |
Hover (or not) the button below and type | |
</h3> | |
<button @mouseover="hover = true" @mouseleave="hover = false" class="hoverBtn"> | |
Hover: {{hover}} | |
</button> | |
<table> | |
<th>key</th> | |
<th>during hover</th> | |
<tr v-for="ev in events"> | |
<td>{{ev.key}}</td> | |
<td>{{ev.hover}}</td> | |
</tr> | |
</table> | |
</template> | |
<style> | |
.hoverBtn { | |
border: 1px solid black; | |
width: 10rem; | |
} | |
</style> |
Top comments (0)