v-model modifiers (lazy, number, trim) in Vue

Introduction

v-model modifiers help you control how and when Vue updates data from user input. They make input handling easier and cleaner.

When you want to update data only after the user finishes typing (lazy).

When you want to automatically convert input to a number (number).

When you want to remove extra spaces from user input (trim).

Syntax

Vue

<input v-model.lazy="dataProperty" />
<input v-model.number="dataProperty" />
<input v-model.trim="dataProperty" />

Modifiers are added after v-model with a dot, like .lazy.

You can combine modifiers, for example: v-model.lazy.number.

Examples

Updates name only when the input loses focus (on change event).

Vue

<input v-model.lazy="name" />

Converts the input value to a number before updating age.

Vue

<input v-model.number="age" />

Removes whitespace from the start and end of the input before updating username.

Vue

<input v-model.trim="username" />

Combines all three: trims spaces, converts to number, and updates only on change.

Vue

<input v-model.lazy.number.trim="score" />

Sample Program

This Vue component shows three inputs using v-model with different modifiers. You can see how each modifier changes when and how the data updates.

Vue

<template>
  <div>
    <label for="lazyInput">Lazy Input (updates on blur):</label>
    <input id="lazyInput" v-model.lazy="lazyText" />
    <p>Value: {{ lazyText }}</p>

    <label for="numberInput">Number Input (converts to number):</label>
    <input id="numberInput" v-model.number="numberValue" />
    <p>Type: {{ typeof numberValue }}, Value: {{ numberValue }}</p>

    <label for="trimInput">Trim Input (removes spaces):</label>
    <input id="trimInput" v-model.trim="trimText" />
    <p>Value: '{{ trimText }}'</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const lazyText = ref('')
const numberValue = ref(0)
const trimText = ref('')
</script>

Important Notes

.lazy waits for the input to lose focus before updating the data, reducing updates while typing.

.number tries to convert the input to a number; if conversion fails, it keeps the original value.

.trim removes spaces only at the start and end, not inside the text.

Summary

v-model modifiers help control input behavior easily.

.lazy updates on change, .number converts to number, .trim removes spaces.

Use them to make forms cleaner and user-friendly.