Repeating in Vue is easy with the v-for directive. This guide shows how to loop a fixed number of times with numeric ranges and dynamic arrays in Vue 3, with an emphasis on performance.
Loop Through a Range Using v-for
You can use the v-for directive with a number to loop a fixed number of times in templates.
<template> <ul>
<li v-for="n in 5" :key="n">Item {{ n }}</li>
</ul>
</template>
This renders five list items labeled from Item 1 to Item 5.
Loop Through a Computed Numeric Range
Use a computed property to dynamically generate a range based on data or conditions.
<template> <div v-for="n in range" :key="n">Box {{ n }}</div>
</template>
<script setup>
import { computed } from 'vue'
const totalBoxes = 8
const range = computed(() => Array.from({ length: totalBoxes }, (_, i) => i + 1))
</script>
This gives you full control over the number and content of iterations.
Use Index in a v-for Loop
You can also access the loop index using (item, index) syntax, even when looping a number of times.
<template> <div v-for="(n, index) in 10" :key="index">
Block #{{ index + 1 }}
</div>
</template>
This is useful when you only care about index-based display or logic.
Create a Range with Array.from()
When you need more advanced range logic, generate arrays using Array.from() and map over them.
<template> <span v-for="n in generateRange(3, 7)" :key="n">{{ n }} </span>
</template>
<script setup>
function generateRange(start, end) {
return Array.from({ length: end - start + 1 }, (_, i) => start + i)
}
</script>
This creates a range from 3 to 7 dynamically and displays the numbers.
Also Read: Why Choose Vue.js: Key Benefits for Developers and Businesses
Best Practices When Looping X Times
Follow these suggestions for cleaner, more maintainable loops in Vue templates.
- Always include a :key in your v-for loop.
- Use computed properties or helper functions for complex ranges.
- Don’t hardcode values if they can change, use reactive state.
Key Takeaway
Use v-for="n in X" to repeat elements a set number of times. For dynamic ranges use Array.from() or computed arrays to keep it reactive and optimize calculations.
Related Resources
