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
<!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..