Vue Events and Methods

How it works

v-on, normally written as @, attaches a Vue event handler. A short expression is fine for a trivial update, but a named method is easier to test when an action has a guard or several effects. The take action below checks availability before decrementing. That makes the state transition understandable independently of how the button looks.

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 packets = ref(1);
function take() {
  if (packets.value > 0) packets.value -= 1;
}
</script>

<template>
  <main>
    <h1>Riverside seed swap</h1>
    <button @click="take">Take packet</button
    ><output data-result>{{ packets }}</output>
  </main>
</template>

Expected result

Taking twice leaves zero rather than a negative count.

The first click consumes the one local packet. The second click reaches the same function and is refused by its guard. A disabled button can improve feedback, but it should not be the only place a reusable action enforces its domain rule.