The Problem: Vue3 Key Events Sometimes (or Always) Fire Twice
If you are using Vue 3, it can be annoying and confusing when key events fire twice.
Here’s the fix:
Solution: Use the
To translate these modifiers, they mean, in order:
@keydownis the keydown event you want to capture.
.entermeans use the ‘enter’ key.
.exactmeans use the exact keycode (i.e., ‘shift + enter’ won’t fire this event handler).
.stopmeans stop the event from bubbling up, only let it fire once.
.preventmeans prevent the default action (whatever else ‘enter’ would have done in context).
Hope you found this helpful!