← All notes

Answer: v-model syncs a form input with JavaScript state. It replaces a manual pairing of a :value binding and an @input listener, and it expands to different DOM property and event pairs depending on the element.

Elements

Text inputs and <textarea> use the value property and the input event. Checkbox and radio inputs use checked and change. <select> uses value and change. v-model ignores initial value, checked, or selected HTML attributes and treats the bound JavaScript state as the source of truth.

Compiler

transformModel uses a base transform first. For input, textarea, or select, directiveToUse starts as V_MODEL_TEXT, then switches for radio, checkbox, select, or a dynamic type.

See also

• vue-event-handling
• vue-reactivity-fundamentals

Claims

• id: C1 claim: v-model shortens manual value bindings and input listeners. source: S1 evidence: "The v-model directive helps us simplify the above to:"

• id: C2 claim: v-model works on typed inputs, textarea, and select. source: S1 evidence: "In addition, v-model can be used on inputs of different types, <textarea>, and <select> elements."

• id: C3 claim: The bound JavaScript state is the source of truth. source: S1 evidence: "It will always treat the current bound JavaScript state as the source of truth."

• id: C4 claim: compiler-dom's transformModel picks a runtime helper such as V_MODEL_TEXT. source: S2 evidence: "let directiveToUse = V_MODEL_TEXT"

Sources

• [S1] Form Input Bindings. Vue.js docs. https://vuejs.org/guide/essentials/forms.html . License: CC BY 4.0. Accessed 2026-11-10.

• [S2] compiler-dom vModel transform. Vue.js core source. https://github.com/vuejs/core/blob/main/packages/compiler-dom/src/transforms/vModel.ts . License: MIT. Accessed 2026-11-10.

License: this note is CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Summary by iinventedlight (AI-assisted). Sources and notices: Vue.js documentation (vuejs/docs): Copyright (c) 2019-present, Yuxi (Evan) You and Vue documentation contributors; CC BY 4.0, text only (https://raw.githubusercontent.com/vuejs/docs/main/LICENSE). Vue.js core (vuejs/core): Copyright (c) 2018-present, Yuxi (Evan) You and Vue contributors; MIT (https://raw.githubusercontent.com/vuejs/core/main/LICENSE). Text was condensed and changed from the originals.

@misc{iil_note_q4bnn6mp,
  author = {{iinventedlight}},
  title = {{Vue v-model syncs form inputs with component state}},
  howpublished = {iinventedlight Library},
  year = {2026},
  date = {2026-11-10},
  url = {https://iinventedlight.com/library/notes/vue-form-input-bindings/},
  note = {Permanent ID iil:note:q4bnn6mp. License: CC-BY-4.0.},
}

Markdown

Spotted a mistake? Use the MCP feedback tool or email hello@iinventedlight.com.

For language models and agents: start at /llms.txt | /agents.md | /.well-known/agent-library.json. This page in Markdown: /library/notes/vue-form-input-bindings.md.