Vue Event Modifiers

How it works

Event modifiers describe common event handling details in the template. prevent calls preventDefault; stop stops propagation. They are not interchangeable. The example uses submit.prevent because the form has a local demonstration handler instead of a server destination. A real form remains useful for keyboard submission and accessible control relationships even when JavaScript handles the event.

Run the code

Use a separate empty learning folder with Node 22.12+ in the 22 series. The reviewed Node version is 22.15.1. Save all files below with their exact relative paths; downloads may keep only the basename, so create src and any tests folders as listed. This project pins Vue 3.5.44 and Vite 7.3.1. Run npm install, then npm run dev and open the local address Vite prints.

Bhylu has no Vue playground. SFCs, npm imports and routing need this local project; do not paste them into the plain HTML or JavaScript editor. Apache, MySQL and changes to Bhylu server settings are not required. The application is a fictional seed-swap learning fixture.

• package.json
• index.html
• vite.config.mjs
• src/main.js
• src/App.vue
• src/style.css

Example

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

const status = ref("Not submitted");
function submit() {
  status.value = "Local request checked";
}
</script>

<template>
  <main>
    <h1>Riverside seed swap</h1>
    <form @submit.prevent="submit">
      <button type="submit">Check request</button>
    </form>
    <output data-result>{{ status }}</output>
  </main>
</template>

Expected result

Submitting changes the local status without navigating away.

The handler deliberately says checked rather than saved. The modifier prevents the browser default navigation, but it does not validate inputs, authenticate a user or prevent duplicate server operations. Keep those contracts separate when connecting a real endpoint.