1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

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

    alpineAlpine.js

    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.