v-model
Two-way data binding between form inputs and component state.
Basic Usage
Bind form inputs to your component's public properties.
<!-- Text input -->
<input v-model="name" type="text" />
<!-- Textarea -->
<textarea v-model="description"></textarea>
<!-- Select -->
<select v-model="country">
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
</select>
<!-- Checkbox -->
<input v-model="agreed" type="checkbox" />
<!-- Radio -->
<input v-model="plan" type="radio" value="basic" />
<input v-model="plan" type="radio" value="pro" />Modifiers
.number
Cast the input value to a number.
<input v-model.number="age" type="number" />.trim
Trim whitespace from the input.
<input v-model.trim="email" />.lazy
Sync on change event instead of input.
<input v-model.lazy="search" />.debounce
Debounce server sync (LiVue-specific).
<input v-model.debounce.500ms="search" />.blur
Sync on blur instead of input (LiVue-specific).
<input v-model.blur="username" />Array Binding
Bind to array indices for dynamic lists.
<div v-for="(item, index) in items">
<input v-model="items[index].name" />
<input v-model.number="items[index].quantity" />
</div>How Server Sync Works
-
1
User types in input
Vue updates the local state immediately.
-
2
Change is queued
The change is added to the request pool.
-
3
Batched request sent
Multiple changes are sent together to reduce requests.
-
4
Server validates & responds
Server confirms the state or sends corrections.