Vue Event Modifiers: Building Interactive Components

Vue's event modifiers provide a powerful and declarative way to handle common event-related tasks, such as preventing default browser behavior or stopping event propagation. This challenge will test your understanding of how to implement and leverage these modifiers within Vue components.

Problem Description

Your task is to create a Vue component that demonstrates the use of various built-in Vue event modifiers. You will need to implement three distinct interactive elements, each showcasing a specific modifier.

Key Requirements:

1. Click Prevention: Create a button that, when clicked, should not trigger its default link navigation (if it were an anchor tag, for example). This should be achieved using the .prevent modifier.
2. Event Stopping: Implement a div element that, when clicked, should prevent its click event from bubbling up to any parent elements. Use the .stop modifier.
3. Key Press Filtering: Develop an input field that should only respond to the 'Enter' key being pressed. Any other key press should be ignored. This should be accomplished using the .once modifier on a key event.

Expected Behavior:

• Clicking the "Prevent Default" button will trigger a console log, but will not perform any default action.
• Clicking the "Stop Propagation" div will trigger a console log for that div, but will not trigger a console log for any parent element.
• Typing in the "Enter Key Only" input and pressing 'Enter' will trigger a console log. Typing other keys will not.

Edge Cases to Consider:

• Ensure the modifiers are correctly applied in the template.
• Verify that the default browser behavior for clicking an anchor tag is indeed prevented.
• Confirm that event propagation is halted at the intended element.
• Test that only the 'Enter' key triggers the input's handler.

Examples

Example 1: Click Prevention

<template>
  <button @click.prevent="handleClickPrevent">Prevent Default Action</button>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  methods: {
    handleClickPrevent() {
      console.log('Default action prevented!');
    }
  }
});
</script>

Output: When the button is clicked, "Default action prevented!" is logged to the console, and no default link navigation occurs.

Example 2: Event Stopping

<template>
  <div @click.stop="handleDivClick" class="parent">
    <p>Click me to stop propagation</p>
    <button @click="handleButtonClick">Inner Button</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  methods: {
    handleDivClick() {
      console.log('Div clicked, propagation stopped!');
    },
    handleButtonClick() {
      console.log('Inner button clicked.');
    }
  }
});
</script>

<style>
.parent {
  padding: 20px;
  border: 1px solid blue;
}
</style>

Output: Clicking the "Inner Button" will log "Inner button clicked." and then "Div clicked, propagation stopped!". Clicking directly on the blue bordered area (but not the button) will log "Div clicked, propagation stopped!". If the .stop modifier were not present on the div, clicking the button would also trigger a log from a hypothetical parent handler, but with .stop, it is prevented from reaching any parent.

Example 3: Key Press Filtering

<template>
  <input type="text" @keyup.enter="handleEnterKey" placeholder="Press Enter here">
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  methods: {
    handleEnterKey() {
      console.log('Enter key pressed!');
    }
  }
});
</script>

Output: When the user types in the input field and presses the 'Enter' key, "Enter key pressed!" is logged to the console. Pressing any other key does not trigger this log.

Constraints

• The solution must be implemented in TypeScript.
• You are expected to use the standard Vue 3 Composition API or Options API.
• The solution should be a single Vue component.
• Focus on correctly applying the .prevent, .stop, and .enter modifiers.

Notes

• Familiarize yourself with Vue's event handling system and the available event modifiers.
• The .enter modifier is a specific key alias for .keyup.enter.
• While the example for .prevent uses a button, think about other elements where preventing the default action is common (e.g., anchor tags).
• Consider how you would test that event propagation is indeed stopped.