Sometimes, we want to loop via v-for X times in a range with Vue.js.

In this article, we’ll look at how to loop via v-for X times in a range with Vue.js.

How to loop via v-for X times in a range with Vue.js?

To loop via v-for X times in a range with Vue.js, we can use the number of times we want to iterate after in or of in v-for.

For instance, we write

<template>
  <div id="app">
    <ul>
      <li v-for="index in 10" :key="index">
        {{ index }}
      </li>
    </ul>
  </div>
</template>

to render 10 li elements by setting v-for to index in 10.

And then we render the index value in the li.

Conclusion

To loop via v-for X times in a range with Vue.js, we can use the number of times we want to iterate after in or of in v-for.