遍历alpinejs中的嵌套数组

Question

嵌套循环不起作用。我检查了好几次，都找不到问题所在。我的代码是：

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
     
<div x-data="{ groups: 
  [{
     name:'size',
     options:['s','m']
  },
  {
     name:'color',
     options:['red','blue']
  }]
}">
  <template x-for="group in groups">
    <h2 x-text="group.name"></h2>
    <div>
      <template x-for="option in group.options" :key="option">
        <div x-text="option"></div>
      </template>
    </div>
  </template>
</div>

感谢任何帮助。谢谢。

Answer 1

您的 div 位置有误。

<script  src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
     
<div
  x-data="{ groups: 
          [{
             name:'size',
             options:['s','m']
          },
          {
             name:'color',
             options:['red','blue']
          }]
           
        }"
>
  <template x-for="group in groups">
   <div>
    <h2 x-text="group.name"></h2>
      <template x-for="option in group.options">
        <div x-text="option"></div>
      </template>
    </div>
  </template>
</div>

遍历alpinejs中的嵌套数组

looping through nested array in alpinejs

html

alpine.js

alpinejs