Alpine JS x-for Loop Example


Share:
Published By: Admin, Published On: May 11, 2021, Category: Alpine JS

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>
<html>
<head>
	<title></title>
	<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
	<style type="text/css">
		body{
			padding: 50px;
			background-color: #f7fcff;
		}
	</style>

</head>
<body>

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


</body>
</html>

I Hope It Will Help You..

Share: