Why the whole list of the array from store isn’t rendered, I get only the title in the div, but not getting the country, price, etc, from the store.
https://codesandbox.io/s/html-template-forked-ywqs9r?file=/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<script type="”module”" src="./script.js"></script>
<title>Vesna</title>
</head>
<body>
<section class="content">
<div class="content__mid" x-data="">
<template x-for="item in $store.products.items" :key="item.id">
<p class="content__mid-item" x-text="item.title"></p>
<p class="content__mid-item" x-text="item.country"></p>
<p class="content__mid-item" x-text="item.manufacturer"></p>
<p class="content__mid-item" x-text="item.price"></p>
<p class="content__mid-item" x-text="item.validDate"></p>
</template>
</div>
</section>
</body>
</html>>Solution :
I am not sure this is the right answer, I have never used Alpine.js. However, by searching for "Alpine js for loop examples", I noticed that it was using a wrapping div when it needed multiple tags in the loop.
Maybe its templating does not allow multiple children under <template>, sort of like React used to require a single element for a component.
<template x-for="item in $store.products.items" :key="item.id">
<div>
<p class="content__mid-item" x-text="item.title"></p>
<p class="content__mid-item" x-text="item.country"></p>
<p class="content__mid-item" x-text="item.manufacturer"></p>
<p class="content__mid-item" x-text="item.price"></p>
<p class="content__mid-item" x-text="item.validDate"></p>
</div>
</template>
