Vue Forms
Handle user input with two-way data binding
📝 What are Vue Forms?
Vue forms use v-model to create two-way data binding between form inputs and your component's data. Changes in the input automatically update your data, and data changes update the input, making form handling simple and reactive.
<!-- Two-way binding with v-model -->
<input v-model="username">
<p>Hello, {{ username }}!</p>
Output:
Hello, !
Form Input Types
Vue's v-model directive works seamlessly with all HTML form input types. It automatically handles the differences between text inputs, checkboxes, radio buttons, and select dropdowns. The v-model creates a two-way binding that keeps your data and UI perfectly synchronized without manual event handling.
Text Input
Single-line text fields
<input
v-model="name"
type="text"
>Checkbox
Boolean or array values
<input
v-model="agreed"
type="checkbox"
>Radio Button
Select one option
<input
v-model="choice"
type="radio"
>Select Dropdown
Choose from options
<select v-model="selected">
<option>A</option>
</select>🔹 Text Input Example
Basic text input with v-model:
<template>
<div>
<label>Enter your name:</label>
<input v-model="name" type="text" placeholder="Your name">
<p>Hello, {{ name || 'Guest' }}!</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
const name = ref('')
</script>Output:
Hello, Guest!
🔹 Checkbox Example
Single checkbox for boolean values:
<template>
<div>
<label>
<input v-model="agreed" type="checkbox">
I agree to the terms
</label>
<p>Agreement status: {{ agreed ? 'Agreed' : 'Not agreed' }}</p>
<button :disabled="!agreed">Submit</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
const agreed = ref(false)
</script>Output:
Agreement status: Not agreed
🔹 Radio Button Example
Select one option from multiple choices:
<template>
<div>
<p>Choose your favorite color:</p>
<label>
<input v-model="color" type="radio" value="red">
Red
</label>
<label>
<input v-model="color" type="radio" value="blue">
Blue
</label>
<label>
<input v-model="color" type="radio" value="green">
Green
</label>
<p>Selected: {{ color }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
const color = ref('')
</script>Output:
Choose your favorite color:
Selected:
🔹 Select Dropdown Example
Choose from a dropdown list:
<template>
<div>
<label>Select your country:</label>
<select v-model="country">
<option value="">-- Choose --</option>
<option value="usa">United States</option>
<option value="uk">United Kingdom</option>
<option value="canada">Canada</option>
</select>
<p>You selected: {{ country || 'Nothing yet' }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
const country = ref('')
</script>Output:
You selected: Nothing yet
🔹 Textarea Example
Multi-line text input:
<template>
<div>
<label>Your message:</label>
<textarea v-model="message" rows="4"></textarea>
<p>Character count: {{ message.length }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
const message = ref('')
</script>Output:
Character count: 0
🔹 Complete Form Example
Putting it all together in a registration form:
<template>
<form @submit.prevent="handleSubmit">
<div>
<label>Username:</label>
<input v-model="form.username" type="text" required>
</div>
<div>
<label>Email:</label>
<input v-model="form.email" type="email" required>
</div>
<div>
<label>
<input v-model="form.subscribe" type="checkbox">
Subscribe to newsletter
</label>
</div>
<button type="submit">Register</button>
<p v-if="submitted">Form submitted successfully!</p>
</form>
</template>
<script setup>
import { ref } from 'vue'
const form = ref({
username: '',
email: '',
subscribe: false
})
const submitted = ref(false)
function handleSubmit() {
submitted.value = true
console.log('Form data:', form.value)
}
</script>