英文:
The whole list of the array from store isn't rendered
问题
为什么从存储中的数组列表没有呈现，我只在 div 中获得标题，但没有从存储中获取国家、价格等等。
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>
英文:
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
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
<!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>
<!-- end snippet -->
答案1
得分: 0
我不确定这是正确答案，我从未使用过Alpine.js。
我最初注意到，示例在我逐个注释掉每个<p>标记时变得异常，并开始出现错误。然而，通过搜索“Alpine js循环示例”，我注意到在需要在循环中使用多个标记时，它使用了一个包装<div>。
也许它的模板不允许在<template>下有多个子元素，有点像React以前需要组件中有一个单一元素一样。
<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>
英文:
I am not sure this is the right answer, I have never used Alpine.js.
I initially noticed that the example got really wonky and started erroring out as I commented out each <p> tag. 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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论