Vue Js - Loop via v-for X times (in a range)

Question

How can I repeat a loop via v-for X (e.g. 10) times?

<!-- want to repeat this (e.g.) 10 times -->

<ul>
  <li v-for="item in shoppingItems">
    {{ item.name }} - {{ item.price }}
  </li>
</ul>

The documentation shows:

<ul>
  <li v-for="item in 10">{{ item }}</li>
</ul>

<!-- or -->

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

<!-- this doesn't work -->

<li v-for="item in 10">{{ item.price }}</li>

but from where does vue know the source of the objects? If I render it like the doc says, I get the number of items and items, but without content.

Hy Bert - I only want to know how to give a v-for (the simplest way) a (x) number of repeats and the example in the doc do not work...... .... in pure js + ajax its so simple return < 9 or or or, but this dont work in the method... — MikeCaine, Jun 18 '17 at 18:35
There are two distinct modes to `v-for`; when it is called against an integer, and when it is called against an array. Mixing those modes and trying to use an integer to control access to content of an array is likely to cause problems. If you need a subset of the array you can filter it. — Jason Aller, Mar 02 '18 at 19:42
You MUST to iterate what you desire to show, if shoppingItems collection doesnt fit to you because of their length (because I'm assuming that as the problem) but it fits you because of their content, you MUST then to create a computed property returning a new array slicing the original array with your desired length...and then iterate that computed array, I find this is the proper way to do it — elverde, Aug 10 '22 at 08:42

score 374 · Answer 1 · edited Oct 24 '22 at 09:53

374

You can use an index in a range and then access the array via its index:

<ul>
  <li v-for="index in 10" :key="index">
    {{ shoppingItems[index].name }} - {{ shoppingItems[index].price }}
  </li>
</ul>

Note that this is 1-indexed: in the first iteration, index is 1, and in the second iteration, index is 2, and so forth.

You can also check the Official Documentation for more information.

edited Oct 24 '22 at 09:53

kissu

40,416
14
65
133

answered Jun 18 '17 at 17:18

Dov Benyomin Sohacheski

7,133
7
38
64

6

It works ::) I have changed it slightly to
{{ shoppingItems.price }}

MikeCaine

Jun 18 '17 at 18:19

4

How to make that 10 a variable?, form the data of the component? – alvaro Mar 26 '19 at 13:20

53

Why this is 1-indexed is completely beyond me. `{{i}} ` => `1 2 3 4 5`. Use `{{i}} ` to get 0-indexing. – ggorlen Aug 28 '19 at 00:04

3

I noticed that you should write shoppingItems[index -1].name to iterate over entire array – peschanko Oct 23 '19 at 13:27

7

@ggorlen the `v-for` directive is different from the standard JS for loop. The first argument is an alias for the array element (not the index) in the standard use case. The index is given as a second element so `(e, i)` returns the element and its index. When using `v-for="n in 10"`, `n` is the "element" which, I guess, is index+1. So you're solution is correct: to get the index use `v-for="(n, i) in 10"` where `n` is 1-indexed and `i` is 0-indexed. Details about the directive are at https://vuejs.org/v2/guide/list.html – phip Jan 05 '21 at 23:50

1

Small note but here, `index` is the actual element and not an index. If that would be the case, using a (real) index would be a quite bad practice overall. – kissu Oct 24 '22 at 09:55

score 71 · Answer 2 · edited Oct 24 '22 at 09:55

71

I have solved it with Dov Benjamin's help like that:

<ul>
  <li v-for="(n,index) in 2">{{ n }}, {{ index }}</li>
</ul>

Note that in this case, n is 1-indexed, and index is 0-indexed.

And another method, for both V1.x and 2.x of vue.js

Vue 1:

<p v-for="item in items | limitBy 10">{{ item }}</p>

Vue2:

// Via slice method in computed prop

<p v-for="item in filteredItems">{{ item }}</p>

computed: {
   filteredItems: function () {
     return this.items.slice(0, 10)
     }
  }

edited Oct 24 '22 at 09:55

kissu

40,416
14
65
133

answered Jun 18 '17 at 18:25

MikeCaine

3,381
2
11
10

1

I had to add `:key` to get it to work in vue3 thus `
{{ n }}, {{ index }}

abulka

Aug 14 '21 at 00:54

@abulka the key was already highly suggested when looping. But yeah, I confirm that it works pretty much the same way with Vue3. – kissu Oct 24 '22 at 09:58

PS: you're using `item in items | limitBy 10` here, a good thing to know is that filters (used with `|`) does not exist anymore in Vue3: https://v3-migration.vuejs.org/breaking-changes/filters.html Thought it would be nice to know why that one would maybe not work at some point. – kissu Dec 03 '22 at 17:37

score 36 · Answer 3 · edited Dec 03 '22 at 17:37

36

I had to add parseInt() to tell v-for it was looking at a number.

<li v-for="n in parseInt(count)" :key="n">{{n}}</li>

edited Dec 03 '22 at 17:37

kissu

40,416
14
65
133

answered Mar 20 '19 at 14:44

jmbmage

2,487
3
27
44

2

Note that this is 1-indexed. – Flimm Jun 10 '21 at 12:23
1

Thank you! This worked in vue 2.6.12 ! – Rodrigo R Oct 12 '21 at 21:34
This did the trick when I tried using variables for the count. Thanks! – PieterJan Aug 31 '22 at 13:37
That should be needed only if `count` is a string. – kissu Oct 24 '22 at 09:59

score 30 · Answer 4 · edited Dec 03 '22 at 17:38

30

You can use the native JS slice method:

<div v-for="item in shoppingItems.slice(0,10)">

The slice() method returns the selected elements in an array, as a new array object.

Based on tip in the migration guide: https://v2.vuejs.org/v2/guide/migration.html#Replacing-the-limitBy-Filter

edited Dec 03 '22 at 17:38

kissu

40,416
14
65
133

answered Jan 31 '18 at 09:42

NickGreen

1,742
16
36

score 25 · Answer 5 · edited Oct 24 '22 at 09:56

25

SOLUTION 1:

<p v-for="i in 5" :key="i">{{ i }}</p>

Remember, result will be from 1-5.

SOLUTION 2: If you want to show limited number of elements in array. You should use slice() method of JavaScript.

<p v-for="i in usersList.slice(0,5)" :key="i">{{ i }}</p>

edited Oct 24 '22 at 09:56

kissu

40,416
14
65
133

answered Aug 21 '21 at 09:40

Ali Raza

1,026
13
20

2

This starts at `1` though, not `0`.... – Douglas Gaskell Dec 11 '21 at 20:47
Yes @DouglasGaskell you are right. Result will be = 1 2 3 4 5 – Ali Raza Mar 31 '22 at 11:38
usersList.slice(0,5) would be preferred to return via computed and not use it directly in template like this. – LastM4N Apr 11 '22 at 07:31

score 6 · Answer 6 · edited Dec 03 '22 at 17:38

6

The same goes for v-for in range:

<li v-for="n in 20 " :key="n">{{n}}</li>

edited Dec 03 '22 at 17:38

kissu

40,416
14
65
133

answered May 16 '18 at 08:15

besthost

759
9
14

3

Please check [tdhulster](https://stackoverflow.com/users/1931666/tdhulster) answer first. – besthost May 16 '18 at 08:17

score 4 · Answer 7 · edited Dec 03 '22 at 17:38

4

There are two ways you can solve,

First One is,

<div v-for="(item, index) in items.slice(0,10)" :key="index">

Second one is,

<li v-for="item  in 20 " :key="item">{{item}}</li>

Hope you get your answer, thank you.

edited Dec 03 '22 at 17:38

kissu

40,416
14
65
133

answered Oct 08 '21 at 11:39

Tanvir Ahammad Chy

106
3

1

Can you explain how they can solve, and what are the condition to choose the second instead of the first ? Please [edit] your answer :) – Elikill58 Oct 08 '21 at 12:16
1

@Elikill58, Heyy, It means, v-fop loop will be continued 20(X number) times. FYI, 20 is not fixed number, its X times. – Tanvir Ahammad Chy Oct 21 '21 at 01:51
Not a good practice to use the index as a key. – kissu Oct 24 '22 at 09:59

score 4 · Answer 8 · edited Dec 03 '22 at 17:39

4

If you want to loop x number of times you can simply use the following:

<div v-for="(item, index) in 10" :key="index">{{ item }}</div>

edited Dec 03 '22 at 17:39

kissu

40,416
14
65
133

answered Jan 06 '22 at 07:27

Kaddu Livingstone

796
9
17

this is the same answer as above – norbekoff Mar 28 '22 at 06:06
Not a good practice to use the index as a key. – kissu Oct 24 '22 at 10:00
@kissu: what? why? this is how all the examples everywhere told me to do. Why do you think it would be wrong to use the index as a key? – Fred Feb 20 '23 at 23:59
1

@Fred usually, examples are sloppy, and don't really care about that part. Google for that, and you'll see that it's a bad practice to use the index since the index can mutate (if you're removing an element in your array for example), hence defeats the purpose of having something unique. – kissu Feb 21 '23 at 01:11

score 1 · Answer 9 · edited Dec 03 '22 at 17:39

1

In 2.2.0+, when using v-for with a component, a key is now required.

<div v-for="item in items" :key="item.id">

Source

edited Dec 03 '22 at 17:39

kissu

40,416
14
65
133

answered Apr 08 '18 at 15:07

tdhulster

1,531
3
18
32

1

It was always a nice thing to have already, glad that it's required now. – kissu Dec 03 '22 at 17:39

score 1 · Answer 10 · answered Dec 16 '22 at 17:01

try a v-if in the v-for, so for example if you want to only show less than 3 (o r any arbitrary amount) in items, then you can do something like this.

<span v-for="(item, itemIndex) in items" :key="itemIndex">
  <div v-if="itemIndex < 3">
   <p>

   {{ item }}

  </p>
 </div>
</span>

score 0 · Answer 11 · answered May 08 '22 at 09:03

First Version

// I expect your data like this
shoppingItems: [
  {
    name: "Clothes A",
    price: 1000
  },
  {
    name: "Clothes B",
    price: 5000
  },
  {
    name: "Clothes C",
    price: 20000
  }
]

<ul>
  // The item in here means each object in shoppingItems
  <li v-for="item in shoppingItems"> 
    {{ item.name }} - {{ item.price }}
  </li>
</ul>

Example code above is for loop each item in shoppingItems

Second Version

<ul>
  // The index will start form 0 until 10 - 1
  <li v-for="index in 10"> 
    {{ shoppingitems[index].name }} - {{ shoppingitems[index].price }}
  </li>
</ul>

score 0 · Answer 12 · answered Jan 24 '23 at 05:28

0

<ul v-for="(item, index) in items.slice(0,10)" :key="item.index">
<li>
 {{item.name}}-{{item.price}}
</li>
</ul>

answered Jan 24 '23 at 05:28

Samanja Cartagena

115
1
10

2

While this code snippet may be the solution, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Shawn Hemelstrand Jan 24 '23 at 08:00

Rajwan · Answer 13 · 2023-02-06T10:59:47.387

0

It works for me..

<li v-for="(index,key) in data.slice(0,5)" :key="key">{{ index.title }}</li>

edited Feb 06 '23 at 10:59

answered Feb 06 '23 at 10:59

Rajwan

1
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 08 '23 at 08:33

hani_97 · Answer 14 · 2023-03-07T06:19:22.067

0

you should use index of array like this:

<ul>
  <li v-for="index in 10">
    {{ shoppingItems[index].name }} - {{ shoppingItems[index].price }}
  </li>
</ul>

You must be careful if the shoppingItems has 2 objects, the result is undefind for index 3, 4, ...

It is better to use shoppingItems.length instead of 10

edited Mar 07 '23 at 06:19

answered Mar 06 '23 at 14:06

hani_97

1
2

score 0 · Answer 15 · answered Apr 05 '23 at 13:26

0

Just in case you need a step of something different than 1:

<select>
    <option v-for="i in 55/5" :key="i">{{ i*5 }}</option>
</select>

Will result on a select with options from 0 to 55 with a step of 5.

answered Apr 05 '23 at 13:26

Sebastián Grignoli

32,444
17
71
86

Vue Js - Loop via v-for X times (in a range)

15 Answers15

Linked