1---
2title: v-for Range Iteration Starts at 1, Not 0
3impact: LOW
4impactDescription: v-for with a number range starts at 1, unlike JavaScript arrays which start at 0
5type: gotcha
6tags: [vue3, v-for, list-rendering, range]
7---
8 
9# v-for Range Iteration Starts at 1, Not 0
10 
11**Impact: LOW** - When using `v-for` with a number (range iteration), the iteration starts at `1`, not `0`. This differs from typical JavaScript behavior where arrays are 0-indexed.
12 
13This gotcha commonly causes off-by-one errors when the generated numbers are used for calculations or array indexing.
14 
15## Task Checklist
16 
17- [ ] Remember `v-for="n in 10"` produces 1 through 10, not 0 through 9
18- [ ] When using range values for array indexing, subtract 1: `items[n - 1]`
19- [ ] Consider creating a computed array if you need 0-based indices
20 
21**Incorrect Assumption:**
22```html
23<!-- Developer expects 0-9, but gets 1-10 -->
24<span v-for="n in 10">{{ n }}</span>
25<!-- Output: 1 2 3 4 5 6 7 8 9 10 -->
26 
27<!-- WRONG: Off-by-one error when used for array access -->
28<li v-for="n in items.length" :key="n">
29  {{ items[n].name }}  <!-- Error! items[10] is undefined when length is 10 -->
30</li>
31```
32 
33**Correct:**
34```html
35<!-- Correct understanding: 1-based range -->
36<span v-for="n in 10" :key="n">{{ n }}</span>
37<!-- Output: 1 2 3 4 5 6 7 8 9 10 -->
38 
39<!-- CORRECT: Adjust index for array access -->
40<li v-for="n in items.length" :key="n">
41  {{ items[n - 1].name }}  <!-- n-1 converts to 0-based -->
42</li>
43 
44<!-- BETTER: Just iterate the array directly -->
45<li v-for="(item, index) in items" :key="item.id">
46  {{ index + 1 }}. {{ item.name }}  <!-- index is 0-based, add 1 for display -->
47</li>
48```
49 
50```html
51<!-- Range for repeating elements (no array involved) -->
52<div v-for="n in 3" :key="n" class="skeleton-row">
53  Loading placeholder {{ n }} of 3...
54</div>
55<!-- Output: Loading placeholder 1 of 3, 2 of 3, 3 of 3 -->
56```
57 
58## When Range Iteration Is Useful
59 
60- Rendering a fixed number of placeholder/skeleton elements
61- Creating pagination buttons: `v-for="page in totalPages"`
62- Generating star ratings: `v-for="star in 5"`
63- Repeating template structures a set number of times
64 
65## Reference
66- [Vue.js List Rendering - v-for with a Range](https://vuejs.org/guide/essentials/list.html#v-for-with-a-range)
67