Vue.js: Forms & v-model

<!-- v-model is syntactic sugar for props + emit -->
<input v-model="searchQuery">

<!-- is equivalent to -->
<input 
  :value="searchQuery" 
  @input="searchQuery = $event.target.value"
>

<!-- Parent component using v-model -->
<CustomInput v-model="searchQuery" />

<!-- is equivalent to -->
<CustomInput 
  :modelValue="searchQuery" 
  @update:modelValue="searchQuery = $event"
/>

<!-- Parent component: v-model.trim -->
<CustomInput v-model.trim="username" />

<!-- Child component: handling the trim modifier -->
<script setup>
const props = defineProps({
  modelValue: String,
  modelModifiers: { default: () => ({}) }
})
const emit = defineEmits(['update:modelValue'])

function onInput(e) {
  let value = e.target.value
  if (props.modelModifiers.trim) {
    value = value.trim()
  }
  emit('update:modelValue', value)
}
</script>

Nothing renders on its own — this is a reference snippet.
Wired into a real component, the plain v-model keeps search in sync on every keystroke, while the multi-model form binds two independent refs (user and pass) to the same child through v-model:username and v-model:password.

v-model="search"                    -> emits update:modelValue
v-model:username="user"             -> emits update:username
v-model:password="pass"             -> emits update:password
Two independent refs, one child component.

// utils/validators.js
export function isEmail(value) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
}

export function isPhone(value) {
  return /^1[3-9]\d{9}$/.test(value)
}

export function minLength(value, min) {
  return value.length >= min
}

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="form.email" @blur="validateField('email')">
    <p v-if="errors.email" class="error">{{ errors.email }}</p>
    
    <input v-model="form.password" type="password">
    <p v-if="errors.password">{{ errors.password }}</p>
    
    <button :disabled="!isValid">Submit</button>
  </form>
</template>

<script setup>
const { reactive, ref } = Vue
import { isEmail, minLength } from '@/utils/validators'

const form = reactive({
  email: '',
  password: ''
})

const errors = reactive({})
const isValid = ref(false)

function validateField(field) {
  if (field === 'email') {
    if (!form.email) {
      errors.email = 'Email is required'
    } else if (!isEmail(form.email)) {
      errors.email = 'Invalid email format'
    } else {
      delete errors.email
    }
  }
  
  if (field === 'password') {
    if (!form.password) {
      errors.password = 'Password is required'
    } else if (!minLength(form.password, 8)) {
      errors.password = 'Password must be 8+ characters'
    } else {
      delete errors.password
    }
  }
  
  isValid.value = Object.keys(errors).length === 0
}

function handleSubmit() {
  Object.keys(form).forEach(validateField)
  if (isValid.value) {
    console.log('Submit:', form)
  }
}
</script>

npm install vee-validate @vee-validate/rules

<template>
  <Form @submit="handleSubmit" :validation-schema="schema">
    <Field name="email" type="email" v-model="form.email" />
    <ErrorMessage name="email" />
    
    <Field name="password" type="password" v-model="form.password" />
    <ErrorMessage name="password" />
    
    <button>Submit</button>
  </Form>
</template>

<script setup>
import { Form, Field, ErrorMessage } from 'vee-validate'
import * as yup from 'yup'

const schema = yup.object({
  email: yup.string().email().required(),
  password: yup.string().min(8).required()
})

const form = reactive({ email: '', password: '' })

function handleSubmit(values) {
  console.log('Valid:', values)
}
</script>

const form = reactive({
  user: {
    name: '',
    email: '',
    age: 0
  },
  address: {
    city: '',
    country: ''
  }
})

const form = reactive({
  items: [
    { name: '', quantity: 1, price: 0 }
  ]
})

function addItem() {
  form.items.push({ name: '', quantity: 1, price: 0 })
}

function removeItem(index) {
  form.items.splice(index, 1)
}

<!-- 1. .lazy: updates on the change event instead of on input -->
<input v-model.lazy="email">

<!-- 2. .number: converts to a number automatically -->
<input v-model.number="age" type="number">

<!-- 3. .trim: trims whitespace automatically -->
<input v-model.trim="username">

<!-- 4. A custom modifier (CustomInput) -->
<CustomInput v-model.trim="text" />

<!-- 5. .debounce (a custom modifier): implemented inside DebouncedInput through modelModifiers -->
<DebouncedInput v-model.debounce="searchText" />

<!-- 1. .lazy: change event (after blur) -->
<input v-model.lazy="email">

<!-- 2. .number: converts to a number automatically -->
<input v-model.number="age" type="number">

<!-- 3. .trim: trims automatically -->
<input v-model.trim="username">

<!-- 4. Combining modifiers -->
<input v-model.lazy.trim="email">

<!-- 5. A custom modifier (child component) -->
<CustomInput v-model.trim="text" />

A pure reference snippet showing the five modifier forms.
The practical difference shows up while typing: .lazy only syncs after the field loses focus, .number turns "42" into 42, .trim strips the surrounding spaces, and .lazy.trim does both at once.

type " 42 " with .lazy  -> value updates on blur
type " 42 " with .number-> typeof value === 'number' (42)
type " 42 " with .trim  -> "42"
type " 42 " with .lazy.trim -> "42" after blur

Five stacked inputs plus a disabled submit button.
Leaving a field empty on blur prints its error underneath (for example Required on the username), a bad email prints Invalid email, an age below 18 prints Age must be 18-120, and a mismatched confirmation prints Passwords do not match.
Only when every field passes does the green "✅ Form passed validation!
Ready to submit" line appear and the button enable;
clicking it then alerts the serialized form.

Empty username        -> Required
"alice"               -> Invalid email
age 16                -> Age must be 18-120
password "123"        -> Password must be ≥8 characters
mismatched confirm    -> Passwords do not match
all valid             -> ✅ Form passed validation! Ready to submit   (button enabled)

A five-row troubleshooting table for the form bugs that show up most often — untyped numbers, broken reactivity after a ref-to-reactive switch, failing uploads, and validation timing — each with a one-line fix.

Renders one table: 5 rows x 3 columns (Mistake | Symptom | Fix).

A five-row comparison table.
The takeaway: switch from separate refs to a single reactive object once a form passes two fields, and reach for defineModel whenever the form lives inside a reusable child component.

Renders one table: 5 rows x 4 columns (Pattern | Conciseness | Performance | Best For).