Alpine JS x-for Loop Example

May 11, 2021 . Admin

Hi Guys,

In This Tutorial, I will Explain you how to work x-for Loop in alpine JS, now we create simple arrays/iterables with alpine JS example.

you can also use this example in your php laravel alpine js project.

Now, let’s started with bellow example, we’ve got an array of developer profiles. We need to loop through that array and display the name and ID number and email address of each developer. Alpine has the x-for

directive for us to conveniently use.

<!DOCTYPE html>
	<script src="" defer></script>
	<style type="text/css">
			padding: 50px;
			background-color: #f7fcff;


<h1>List of Users</h1>
        users : [
			{id: 1, name: 'Paresh', email: ''},
			{id: 2, name: 'Rakesh', email: ''},
			{id: 3, name: 'Mahesh', email: ''}
	<template x-for="(user, index) in users" :key="index">
	    <!-- You can also reference "index" inside the iteration if you need. -->
	    <div >
	    		<strong>ID: </strong><span x-text=""></span>
	    		<strong>Name: </strong><span x-text=""></span>
	    		<strong>Email: </strong><span x-text=""></span>


I Hope It Will Help You..

#Alpine JS