Key modifiers for keyboard events in Vue - Step-by-Step Execution

Concept Flow - Key modifiers for keyboard events

User presses key

↓

Vue listens to event

↓

Check for key modifiers

↓

.ctrl

↓

If match, run handler

↓

Update component state or action

When a user presses a key, Vue checks if any key modifiers like ctrl, shift, alt, or meta are pressed. If the modifiers match, Vue runs the event handler.

Execution Sample

Vue

<template>
  <button @keydown.ctrl="count++">Press Ctrl + key</button>
  <p>Count: {{ count }}</p>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

This Vue component increases count only when a key is pressed while holding the Ctrl key.

Execution Table

Step	Event Triggered	Key Pressed	Ctrl Key?	Shift Key?	Alt Key?	Handler Runs?	Count Value
1	keydown	a	No	No	No	No	0
2	keydown	a	Yes	No	No	Yes	1
3	keydown	b	Yes	No	No	Yes	2
4	keydown	c	No	Yes	No	No	2
5	keydown	d	Yes	No	No	Yes	3
6	keydown	e	No	No	Yes	No	3
7	keydown	f	Yes	No	No	Yes	4
8	keyup	f	Yes	No	No	No	4

💡 Handler only runs when Ctrl key is pressed during keydown; other events or missing Ctrl do not trigger count increment.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5	After 6	After 7	Final
count.value	0	0	1	2	2	3	3	4	4

Key Moments - 3 Insights

Why doesn't the count increase when I press a key without holding Ctrl?

Because the handler only runs if the Ctrl key modifier is active, as shown in execution_table rows 1 and 4 where Ctrl is 'No' and handler does not run.

Does the handler run on keyup events?

No, the handler is attached to keydown events only. Row 8 shows a keyup event with Ctrl pressed but the handler does not run.

What happens if I press Shift or Alt with the key?

The handler does not run because only Ctrl modifier is checked in this example. Rows 4 and 6 show Shift and Alt pressed but handler stays inactive.

Visual Quiz - 3 Questions

Look at the execution table, what is the count value after step 3?

A 1

B 2

C 3

D 0

💡 Hint

Check the 'Count Value' column at step 3 in the execution_table.

At which step does the handler NOT run despite Ctrl being pressed?

A Step 8

B Step 5

C Step 2

D Step 7

💡 Hint

Look for 'Handler Runs?' column where Ctrl is 'Yes' but handler is 'No'.

If we change the modifier to @keydown.shift, which step(s) would trigger the handler?

A Steps 1 and 6

B Steps 2 and 3

C Step 4 only

D Step 7 only

💡 Hint

Look at the 'Shift Key?' column in execution_table to find where Shift is 'Yes'.

Concept Snapshot

Vue key modifiers let you run event handlers only when specific keys like Ctrl, Shift, Alt, or Meta are pressed.
Use syntax like @keydown.ctrl or @keyup.shift.
Handlers run only if the modifier matches the key event.
This helps avoid extra checks inside your code.
Modifiers improve keyboard accessibility and control.

Full Transcript

This visual trace shows how Vue listens for keyboard events with key modifiers. When a user presses a key, Vue checks if the Ctrl, Shift, Alt, or Meta keys are held down. If the event matches the modifier, Vue runs the handler. In the example, the count increases only when Ctrl is pressed during keydown. The execution table tracks each key event, which modifiers are active, and whether the handler runs. The variable tracker shows how count changes only on matching events. Key moments clarify common confusions like why count doesn't increase without Ctrl or on keyup events. The quiz tests understanding by asking about count values and event triggers. This helps beginners see exactly how Vue key modifiers control event handling step-by-step.