Alpine.js Playground
Examples Newsletter

x-for n times/iterations

4 horizontal rules using Array.from({ length: 4 }):





4 horizontal rules using new Array(4).fill(null):





4 horizontal rules using new Array(4).fill(undefined):





<div 
  x-data="" class="md:w-2/3 mx-auto flex flex-col"
>
  <p class="mb-4">
    4 horizontal rules using <code>Array.from({ length: 4 })</code>:
  </p>
  <template 
    x-for="_ in Array.from({ length: 4 })"
  >
    <hr class="mb-8 border-blue-500">
  </template>

  
    <hr class="mb-8 border-blue-500">
  
    <hr class="mb-8 border-blue-500">
  
    <hr class="mb-8 border-blue-500">
  
    <hr class="mb-8 border-blue-500">
  <p class="mb-4">
    4 horizontal rules using <code>new Array(4).fill(null)</code>:
  </p>
  <template 
    x-for="_ in new Array(4).fill(null)"
  >
    <hr class="mb-8 border-blue-500">
  </template>
  
    <hr class="mb-8 border-blue-500">
  
    <hr class="mb-8 border-blue-500">
  
    <hr class="mb-8 border-blue-500">
  
    <hr class="mb-8 border-blue-500">
  <p class="mb-4">
    4 horizontal rules using <code>new Array(4).fill(undefined)</code>:
  </p>
  <template 
    x-for="_ in new Array(4).fill(undefined)"
  >
    <hr class="mb-8 border-blue-500">
  </template>

    <hr class="mb-8 border-blue-500">
  
    <hr class="mb-8 border-blue-500">
  
    <hr class="mb-8 border-blue-500">
  
    <hr class="mb-8 border-blue-500">
  </div>

💥 Subscribe for Early Access to the Alpine.js Handbook 📖 💥