Alpine.js: Binding user input to variables

One common thing you want to do is bind the value of an input element to a data value.

Say you have an input field where people can write their name into. You can bind its value to the name variable defined in x-data:

<div x-data="{ name: '' }">
  <p>Your name:</p>
  <input x-model="name" />
  
  <hr>
  <p>Your name is 
    <span x-text="name"></span>
  </p>
</div>

Lessons in this unit:

0: Introduction
1: Installing Alpine
2: The basics of Alpine
3: Events
4: Defining data
5: Looping
6: ▶︎ Binding user input to variables
7: Watching variables change
8: Stores
Want to learn more? Check out our courses