Two-way Binding
This page explains how :model writes form input back into data.
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.