Forms and v-model

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Bind form fields to state
Use the trim, number, and lazy modifiers

Let's break it down simply

v-model links an input's value to your reactive state. .trim strips whitespace, and .number converts the value to a number. Always validate your form clearly before submitting.

vue

<script setup>
import { reactive } from 'vue'
const form = reactive({ name: '', age: 18, role: 'student', agreed: false })
</script>

<template>
  <input v-model.trim="form.name" placeholder="Name">
  <input v-model.number="form.age" type="number">
  <select v-model="form.role">
    <option value="student">Student</option>
    <option value="teacher">Teacher</option>
  </select>
  <label><input v-model="form.agreed" type="checkbox"> Agree</label>
</template>

You should see

{ name: 'Mya', age: 21, role: 'student', agreed: true }

Try it yourself

Build an enrollment form with name, email, and a course select, and check for empty fields.

Form Input Bindings — Vue.js

Easy traps

Assuming a checkbox's value is always a string
Treating client-side validation alone as security validation

Exercise

Build an enrollment form with name, email, and a course select, and check for empty fields.

You'll know it worked when: { name: 'Mya', age: 21, role: 'student', agreed: true }