[Mise] Keep a DOM input and state value in sync with the `x-model` directive in Alpine 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.

 

<div x-data="{name: ''}">
  <label>Your name</label>
  <!-- [(ngModel)] -->
  <input type="text" x-model="name">
  <p>Hi, my name is <span x-text="name || '_______________'"></span>! 👋</p>
</div>