Keep a DOM input and state value in sync with the `x-model` directive in Alpine JS

Share this video with your friends

Send Tweet

In this lesson, we see how the x-model directive makes achieving "two-way data binding" effortless in Alpine JS.

We see what it would take to recreate the same functionality with an x-bind directive for the input value, as well as an @input event listener which, thanks to an access to the browser's native events via the $event magic property, sets the state value to $event.target.value.

Free Community Resource

A Community Resource means that it’s free to access for all. The instructor of this lesson requested it to be open to the public.