You’re browsing the documentation for v2.x and earlier. For v3.x, click here. You can use the v-model directive to create two-way data bindings on form input, textarea, and select elements.
- It automatically picks the correct way to update the element based on the input type.
Although a bit magical, v-model is essentially syntax sugar for updating data on user input events, plus special care for some edge cases. v-model will ignore the initial value, checked, or selected attributes found on any form elements. It will always treat the Vue instance data as the source of truth.
v-model internally uses different properties and emits different events for different input elements:.
v-model with Components
text and textarea elements use value property and input event;. checkboxes and radiobuttons use checked property and change event;. select fields use value as a prop and change as an event. For languages that require an IME (Chinese, Japanese, Korean, etc.), you’ll notice that v-model doesn’t get updated during IME composition.