looping through nested array in alpinejs

user_12192050 0
Viewed 139

Nested loop doesn't work. I've checked several times and can't find the problem. My code is :

<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>

Any help is appreciated. Thank you.

alpine.js html
1 Answers

Your div placement is wrong.

<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>

user_179765990
Related