v-model on All Form Elements
Input, textarea, select, checkbox, radio — how v-model adapts per element type.
Binding Form Inputs
v-model creates two-way binding between form controls and your reactive state. Each kind of control — text, checkbox, radio, select, textarea — uses v-model a little differently. This lesson covers them all.
Text Input
On a text input, v-model binds the value and updates on input. Type in the box and the ref updates live.
<script setup>
import { ref } from 'vue'
const name = ref('')
</script>
<template>
<input v-model="name" />
<p>Hello, {{ name }}</p>
</template>All lessons in this course
- v-model on All Form Elements
- Form Submission and Reset
- Manual Validation Patterns
- VeeValidate for Schema-Based Validation