Handling Form Input

Vue allows you to handle form input using v-model together with events. This helps you collect and process user data when a form is submitted.

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

const name = ref("");

function handleSubmit() {
  console.log("Submitted:", name.value);
}
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="name" placeholder="Enter your name" />
    <button type="submit">Submit</button>
  </form>
</template>

The @submit.prevent directive listens for the form submission and prevents the default page reload.

When the form is submitted, the function runs and processes the input data.

You can handle multiple inputs by creating separate reactive variables.

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

const email = ref("");
const password = ref("");

function handleSubmit() {
  console.log(email.value, password.value);
}
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="email" placeholder="Email" />
    <input v-model="password" placeholder="Password" />
    <button type="submit">Submit</button>
  </form>
</template>

Handling form input allows you to collect user data and control how it is processed in your application.