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

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.

3

10 Answers

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.

5

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) } }

1

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>

2

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:

1

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>

3

The same goes for v-for in range:

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

1

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.

2

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

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>

1

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>

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy