整个数组列表从存储中没有被渲染。

huangapple go评论115阅读模式
英文:

The whole list of the array from store isn't rendered

问题

为什么从存储中的数组列表没有呈现,我只在 div 中获得标题,但没有从存储中获取国家、价格等等。

https://codesandbox.io/s/html-template-forked-ywqs9r?file=/index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <link rel="stylesheet" href="styles.css" />
  8. <script type="module" src="./script.js"></script>
  9. <title>Vesna</title>
  10. </head>
  11. <body>
  12. <section class="content">
  13. <div class="content__mid" x-data="">
  14. <template x-for="item in $store.products.items" :key="item.id">
  15. <p class="content__mid-item" x-text="item.title"></p>
  16. <p class="content__mid-item" x-text="item.country"></p>
  17. <p class="content__mid-item" x-text="item.manufacturer"></p>
  18. <p class="content__mid-item" x-text="item.price"></p>
  19. <p class="content__mid-item" x-text="item.validDate"></p>
  20. </template>
  21. </div>
  22. </section>
  23. </body>
  24. </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 -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4. &lt;meta charset=&quot;UTF-8&quot; /&gt;
  5. &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt;
  6. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
  7. &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot; /&gt;
  8. &lt;script type=&quot;”module”&quot; src=&quot;./script.js&quot;&gt;&lt;/script&gt;
  9. &lt;title&gt;Vesna&lt;/title&gt;
  10. &lt;/head&gt;
  11. &lt;body&gt;
  12. &lt;section class=&quot;content&quot;&gt;
  13. &lt;div class=&quot;content__mid&quot; x-data=&quot;&quot;&gt;
  14. &lt;template x-for=&quot;item in $store.products.items&quot; :key=&quot;item.id&quot;&gt;
  15. &lt;p class=&quot;content__mid-item&quot; x-text=&quot;item.title&quot;&gt;&lt;/p&gt;
  16. &lt;p class=&quot;content__mid-item&quot; x-text=&quot;item.country&quot;&gt;&lt;/p&gt;
  17. &lt;p class=&quot;content__mid-item&quot; x-text=&quot;item.manufacturer&quot;&gt;&lt;/p&gt;
  18. &lt;p class=&quot;content__mid-item&quot; x-text=&quot;item.price&quot;&gt;&lt;/p&gt;
  19. &lt;p class=&quot;content__mid-item&quot; x-text=&quot;item.validDate&quot;&gt;&lt;/p&gt;
  20. &lt;/template&gt;
  21. &lt;/div&gt;
  22. &lt;/section&gt;
  23. &lt;/body&gt;
  24. &lt;/html&gt;

<!-- end snippet -->

答案1

得分: 0

我不确定这是正确答案,我从未使用过Alpine.js。

我最初注意到,示例在我逐个注释掉每个<p>标记时变得异常,并开始出现错误。然而,通过搜索“Alpine js循环示例”,我注意到在需要在循环中使用多个标记时,它使用了一个包装<div>

也许它的模板不允许在<template>下有多个子元素,有点像React以前需要组件中有一个单一元素一样。

  1. <template x-for="item in $store.products.items" :key="item.id">
  2. <div>
  3. <p class="content__mid-item" x-text="item.title"></p>
  4. <p class="content__mid-item" x-text="item.country"></p>
  5. <p class="content__mid-item" x-text="item.manufacturer"></p>
  6. <p class="content__mid-item" x-text="item.price"></p>
  7. <p class="content__mid-item" x-text="item.validDate"></p>
  8. </div>
  9. </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 &lt;p&gt; 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 &lt;template&gt;, sort of like React used to require a single element for a component.

  1. &lt;template x-for=&quot;item in $store.products.items&quot; :key=&quot;item.id&quot;&gt;
  2. &lt;div&gt;
  3. &lt;p class=&quot;content__mid-item&quot; x-text=&quot;item.title&quot;&gt;&lt;/p&gt;
  4. &lt;p class=&quot;content__mid-item&quot; x-text=&quot;item.country&quot;&gt;&lt;/p&gt;
  5. &lt;p class=&quot;content__mid-item&quot; x-text=&quot;item.manufacturer&quot;&gt;&lt;/p&gt;
  6. &lt;p class=&quot;content__mid-item&quot; x-text=&quot;item.price&quot;&gt;&lt;/p&gt;
  7. &lt;p class=&quot;content__mid-item&quot; x-text=&quot;item.validDate&quot;&gt;&lt;/p&gt;
  8. &lt;/div&gt;
  9. &lt;/template&gt;

整个数组列表从存储中没有被渲染。

huangapple
  • 本文由 发表于 2023年3月15日 19:25:51
  • 转载请务必保留本文链接:https://go.coder-hub.com/75744056.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定