Start range in v-for="n in 10" from zero

Question

I want to start the range from 0 instead of 1 in v-for="n in 10" which results in 1 2 3 .... 10 Is there a way to do it in Vuejs?

Handsaw

I'm not sure if this can work to be honest, because 10 isn't an iterable... – Sextuplicate

@Sandrooco It will work in Vue. See dfsq's answer (or the docs: vuejs.org/v2/api/#v-for) – Rood

Answer 1

You can use index (i) instead of value (n), it will start with 0:

<div v-for="(n, i) in 10">{{ i }}</div>

Output:

0
1
2
...

Springtail

While this works, I don't know if I can find this in documentation anywhere! Nice 👍 – Ricotta

@Ricotta it's said in docs: vuejs.org/v2/guide/list.html "v-for also supports an optional second argument for the index of the current item." – Springtail

Answer 2

You can also just subtract a value from your integer

<div v-for="n in 10">
  {{ n - 1 }}
</div>

This way you can have numbers with a negative value

Ten

Answer 3

Just use v-for="i in 10" and you got values 1...10. Also you should use use the key prop like below.

<div v-for="i in 10" :key="i">{{ i }}</div>

Output

1
2
3
...

Rajasthani