Stop Reacting to Every Keystroke with Alpine.js x-model.debounce
Use Alpine.js x-model.debounce to delay reactive state updates until a user stops typing, reducing work on search and filter inputs.
Loading…
ReadMeFeed / Community knowledge
#x-model
Real questions. Useful conversations. Find the people who know your stack.
alpinejsAlpine.js x‑model: Lightweight Two‑Way Binding for Modern Forms
Alpine.js’ x‑model lets you bind form inputs to component state with two‑way reactivity. Learn how it works, see a live search example, and understand its limits for lightweight UI development.
Diagnosing Alpine.js x-model Two‑Way Binding Failures in Form Inputs
A diagnostic checklist for Alpine.js x-model binding failures: missing x-data, .lazy modifier, custom component event emission, and Alpine 3.x reactivity changes, with step‑by‑step verification and fixes.
Using Alpine.js x-model.lazy to Debounce Form Input Updates
Learn how Alpine.js’ x-model.lazy modifier defers input updates to blur or Enter, reducing reactive work while introducing a brief delay in state visibility.
AlpineJS and Server-Rendered HTML: Hydration Synchronization
State Synchronization During Hydration When integrating AlpineJS 3.x with server-rendered HTML, the framework enhances elements containing directives upon runtime initialization. A specific challenge arises when using x-model on input elements that are delivered from the server with pre-filled values. While the DOM displays the server-provided value, the int