Using x-for with Range

If we need to simply loop n number of times, rather than iterate an Array, Alpine provides a short syntax.

Version

Alpine 3.9

x-for

range000

1, 2, 3 are created by x-for.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/alpinejs" defer></script>
    <title>Alpine</title>
  </head>
  <body x-data>
    <ul>
      <template x-for="x in 3">
        <li x-text="x" />
      </template>
    </ul>
  </body>
</html>

Line 9

<body x-data>
  <ul>
    <template x-for="x in 3">
      <li x-text="x" />
    </template>
  </ul>
</body>

We can use Integer Literal instead of Array.

Conclusion

x-for is just range in other language

Reference

Alpine, x-for