Vue Events

Vue Events: Handling User Input and Event Modifiers

Vue attaches DOM event listeners to elements using the v-on directive, usually written with the @ shorthand. Instead of calling addEventListener manually, you bind @click, @submit, or @keyup directly to functions in <script setup>.

Vue also provides built-in event modifiers that run common DOM tasks like preventDefault() before your handler executes. This keeps your JavaScript handlers focused on business logic rather than boilerplate DOM code.

flowchart TD
    Trigger["DOM Event (@submit)"] --> Modifier["Modifier (.prevent)"]
    Modifier --> Handler["Script Setup Handler Function"]

Inline Handlers vs Method Handlers

• Inline Handlers: Best for tiny updates like @click="count++" or passing custom arguments.
• Method Handlers: Best for multi-step logic, validation, or API calls defined in <script setup>.

Useful Event and Key Modifiers

• .prevent: Calls event.preventDefault() so form submissions do not reload the page.
• .stop: Calls event.stopPropagation() to stop the event from bubbling to parent elements.
• .once: Fires the event listener only one time.
• .self: Runs the handler only when event.target is the element itself.
• .enter / .esc: Filters keyboard events to run only on specific keys.

Practical SFC Event Handling Example

This component combines @submit.prevent, @keyup.enter, and @click inside a <script setup> block.

<script setup>
import { ref } from 'vue';

const message = ref('');
const logs = ref([]);

function handleSubmit() {
  const text = message.value.trim();
  if (!text) return;

  logs.value.push(text);
  message.value = '';
}

function logKeyPress(label, event) {
  console.log(label, 'pressed on:', event.target.tagName);
}
</script>

<template>
  <div class="event-container">
    <form @submit.prevent="handleSubmit">
      <input
        v-model="message"
        @keyup.enter="logKeyPress('Enter', $event)"
        placeholder="Type a message and press Enter"
      />
      <button type="submit">Send</button>
    </form>

    <ul>
      <li v-for="(entry, idx) in logs" :key="idx">{{ entry }}</li>
    </ul>
  </div>
</template>

Common Mistakes

• Calling a Method Instead of Referencing It: Writing @click="handleSubmit()" without arguments works in Vue 3, but if you want the native event object automatically, write @click="handleSubmit" without parentheses.
• Losing $event in Inline Handlers: When passing custom parameters like logKeyPress('Enter', $event), you must pass $event explicitly to access the native DOM event.
• Packing Logic into Templates: Avoid multi-line expressions inside @click="...". Move branching logic into named functions inside <script setup>.

Frequently Asked Questions

Can I chain multiple event modifiers together?

Yes, you can chain modifiers like @click.stop.prevent="saveItem". Vue executes chained modifiers from left to right.

How do I listen for keyboard combinations like Ctrl+Enter?

Vue supports system modifier keys such as .ctrl, .alt, .shift, and .meta. Write @keyup.ctrl.enter="submitNote" to trigger only when both keys are pressed.

Are Vue template event listeners cleaned up automatically?

Yes. When a component unmounts, Vue removes all template @ event listeners automatically so they do not leak memory.