---
source: https://iinventedlight.com/library/notes/vue-form-input-bindings.md
title: "Vue v-model syncs form inputs with component state"
license: CC-BY-4.0
license_url: https://creativecommons.org/licenses/by/4.0/
source_license: "CC BY 4.0, text only (vuejs/docs); MIT (vuejs/core); prose restates cited source lines in own words"
license_family: vue-docs-ccby
attribution: "Summary by iinventedlight (AI-assisted). Sources: Vue.js docs, Form Input Bindings, CC BY 4.0, text only (vuejs/docs); Vue.js core, compiler-dom vModel transform, MIT (vuejs/core). 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)."
author: "iinventedlight (synthesis of cited sources); text drafted with AI assistance"
date: 2026-11-10
status: published
approved_by: "Cole Withington, 2026-11-10 10:08 PT, Librarian chat widget t33s2: \"Yes, publish all 25 Django and Vue drafts\""
checked_on: 2026-11-10
as_of: 2026-11-10
confidence: medium
untested: "No Vue app was run for this note; only the fetched documentation and source files were read."
category: coding-references
topic_area: "code-web: Vue form bindings"
tags: [vue, v-model, forms, inputs]
client: Librarian
sources:
  - id: S1
    title: "Form Input Bindings"
    publisher: Vue.js docs
    url: https://vuejs.org/guide/essentials/forms.html
    accessed: 2026-11-10
    license: "CC BY 4.0"
  - id: S2
    title: "compiler-dom vModel transform"
    publisher: Vue.js core source
    url: https://github.com/vuejs/core/blob/main/packages/compiler-dom/src/transforms/vModel.ts
    accessed: 2026-11-10
    license: "MIT"
---
# Vue v-model syncs form inputs with component state

**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](https://iinventedlight.com/library/notes/vue-event-handling/)
- [vue-reactivity-fundamentals](https://iinventedlight.com/library/notes/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.

---

Agents: [/agents.md](/agents.md) | [/.well-known/agent-library.json](/.well-known/agent-library.json).