The steps are:
- add alpine.js to head section of your HTML
- create loop data
- get data on template
- loop and show data
Create Loop Data
Make a function inside a script tag just above the </body>
tag
...
<body>
...
<script>
function theData() {
return {
produk: [
{
name: "Boaty McBoatface",
price: "$300.000",
},
{
name: "WD-40",
price: "$45.000",
},
{
name: "Bugs for lyfe",
price: "$105.000",
},
]};
}
</script>
</body>
Get Data to HTML
We need to make it available on the HTML. Use x-data
from alpine.js to get the produk list above
<div x-data="theData()">
<!-- This wil make the arry of produk available inside this div -->
</div>
x-data
will make all data and function(behaviour) inside theData()
function available inside the div scope
Loop it and print
<div x-data="produk()">
<!-- This wil make the arry of produk available inside this div -->
<template>
<div x-for="item in produk">
<h1 x-text="item.name"></h1>
<h4 x-text="item.price"></h4>
</div>
</template>
</div>
x-for
–> will iterate the produk
property inside that available from the x-data
scope
<template>
–> x-for
MUST use this tag. Couldn’t use standard HTML tags
x-text
–> will update innerText
of an element
Use Case
I use this to create a list of product when create an e-commerce template because creating template means that we need to change the HTML and CSS constantly. Previously there are only full blown templating engine included on a web framework or need a more complicated setup.
Using alpine.js is much more simple.