Alpine.js: Looping

If you store some x-data variable as an array, you can loop through it and render a template multiple times using x-for, like this:

<ul x-data="shop">
  <template x-for='(item, index) in cart'>
    <li>
      <p x-text='item.title'></p>
      <p x-text='formatAsPrice(item.price)'></p>
      <button @click=`removeFromCart(index)`>
        Remove
      </button>
    </li>
  </template>
</ul>

The caveat is that x-for must be put on a <template> tag, and this must have a single child element (for example, wrap all tags in a div if you have more).

The <template> tag is a special tag used to hold content that’s not rendered immediately on the page, but rendered using JavaScript (see MDN).

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

Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. Launching May 21, 2024. Join the waiting list!