Key modifiers for keyboard events in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you use the .ctrl modifier in Vue keyboard events?

Consider a Vue 3 component with a button that listens for a keydown event with the .ctrl modifier. What behavior does the button exhibit when clicked with and without pressing the Control key?

Vue

<template>
  <button @keydown.ctrl="handleKey">Press Ctrl + Key</button>
</template>

<script setup>
function handleKey() {
  alert('Control key pressed with another key!');
}
</script>

A The alert shows only if the Control key is NOT pressed.

B The alert shows on every key press regardless of the Control key.

C The alert only shows if the Control key is held down during the key press.

D The alert never shows because .ctrl is not a valid modifier.

💡 Hint

Think about what the .ctrl modifier does in Vue event handling.

The .ctrl modifier makes the event listener trigger only when the Control key is pressed during the keyboard event.

📝 Syntax

intermediate

Which Vue key modifier syntax correctly listens for the Escape key?

You want to run a method when the Escape key is pressed on an input element. Which option uses the correct Vue key modifier syntax?

Vue

<template>
  <input @keydown.???="onEscape" />
</template>

A @keydown.escape="onEscape"

B @keydown.esc="onEscape"

C @keydown.Escape="onEscape"

D @keydown.escKey="onEscape"

💡 Hint

Vue key modifiers use lowercase names matching the official key names.

The correct key modifier for Escape is .escape in Vue. .esc is not recognized, and casing matters.

🔧 Debug

advanced

Why does this Vue keyboard event handler not trigger on Shift + Enter?

Given this Vue template, why does pressing Shift + Enter not call the submitForm method?

Vue

<template>
  <textarea @keydown.enter.shift="submitForm"></textarea>
</template>

<script setup>
function submitForm() {
  alert('Form submitted');
}
</script>

A Vue does not support multiple key modifiers on the same event.

B The order of modifiers matters; .shift should come before .enter.

C The correct syntax is @keydown.shift.enter, not @keydown.enter.shift.

D The code works correctly; the issue is likely browser or focus related.

💡 Hint

Try testing the code in a browser and check if the event fires.

Vue supports multiple modifiers in any order. The code is valid and should work. If it doesn't, the problem is elsewhere, like browser behavior or element focus.

❓ state_output

advanced

What is the value of message after pressing Alt + A in this Vue component?

Analyze the following Vue component. What will message be after the user presses Alt + A?

Vue

<template>
  <input @keydown.alt.a="updateMessage" />
  <p>{{ message }}</p>
</template>

<script setup>
import { ref } from 'vue'
const message = ref('')
function updateMessage() {
  message.value = 'Alt + A pressed'
}
</script>

A "Alt + A pressed"

B "" (empty string)

C undefined

D "Alt pressed"

💡 Hint

The .alt and .a modifiers require both keys pressed together.

The handler runs only when Alt and the 'a' key are pressed simultaneously, setting message to 'Alt + A pressed'.

🧠 Conceptual

expert

Which Vue key modifier prevents the event from propagating to parent elements?

You want to stop a keyboard event from bubbling up to parent elements in Vue. Which key modifier achieves this?

A .self

B .stop

C .prevent

D .capture

💡 Hint

Think about event propagation and how to stop it.

The .stop modifier calls event.stopPropagation(), preventing the event from bubbling up.