Two-way Binding

This page explains how :model writes form input back into data, and what it does not do.

Syntax

<div id="app">
  <input type="text" :model="username" />
  <p>Hello, {{ username }}</p>
</div>

<script>
  const app = new QUI({ id: "app", data: { username: "" } });
</script>

Behavior per Element

Element	Events	Value written to `app.data[key]`
Text `<input>`, `<textarea>`	`keyup`, `change`	`value`, `""` when empty
`<select>`	`change`	The selected option's `value`
`<input type="checkbox">`, `<input type="radio">`	`change`	Values of every checked input on the page with the same `name` and `type`, joined with `,`

:model on any other element is ignored.

Limits

Limit	Description
Writes back only	Input is written to data; changing `app.data.username` in code does not change the field's value
Initial value	Add `:value="username"` to prefill the field
Top-level keys only	`:model="user.name"` writes a top-level key named `"user.name"`, not `name` on the `user` object
Timing	Text input is written on `keyup`; a mouse paste is written only on `change` (blur)
Checkbox scope	Computed across every element with that `name` in `document.body`, not just the instance

For immediate two-way sync, use @input from Event Binding and write the data yourself.