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

    Iterate through data with the `x-for` attribute in Alpine JS

    alpineAlpine.js

    In this lesson, we move the component definition to a function, defined in a script tag in the HTML document.

    We then iterate through an Array of Objects with the x-for directive in Alpine JS. We use a <template> tag to wrap the HTML element we want to repeat for each item, and put the x-for directive on that template tag.

    We also define a "computed" property by adding a method on our function, which checks if a given ID matched the currently active tab id. This computed property allows us to determine wether or not to apply the "active" classname to our tab buttons.