v-model with text inputs in Vue

Introduction

v-model helps you easily connect a text input to your data. It keeps the input and data in sync automatically.

When you want to get user input from a text box and use it in your app.

When you want to show a text input that updates as the user types.

When you want to build forms that react to what the user types.

When you want to keep your data and input box always matching without extra code.

Syntax

Vue

<input v-model="variableName" type="text" />

The variableName must be defined in your component's data or setup.

v-model automatically updates the variable when the user types.

Examples

This binds the input to a variable called name. Typing changes name.

Vue

<input v-model="name" type="text" />

Here, the input is for an email, but v-model works the same way.

Vue

<input v-model="email" type="email" />

You can add placeholders and other attributes as usual.

Vue

<input v-model="message" type="text" placeholder="Enter message" />

Sample Program

This Vue component shows a text input bound to username. As you type, the paragraph below updates live to show what you typed. It uses ref to create reactive data and v-model to bind the input.

Vue

<template>
  <section>
    <label for="username">Username:</label>
    <input id="username" v-model="username" type="text" aria-label="Username input" />
    <p>Your username is: {{ username }}</p>
  </section>
</template>

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

const username = ref('')
</script>

<style scoped>
section {
  max-width: 300px;
  margin: 1rem auto;
  font-family: Arial, sans-serif;
}
input {
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
p {
  font-weight: bold;
  color: #333;
}
</style>

Important Notes

v-model works with ref or reactive data in Vue 3.

Always add aria-label or use <label> for accessibility.

v-model updates on input events, so the data changes as you type.

Summary

v-model binds text inputs to data easily.

It keeps input and data in sync automatically.

Use it to build interactive forms with live updates.