Vue Js - Loop via v-for X times (in a range)
Javascriptvue.jsVuejs2V ForJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
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)
}
}
Solution 3 - Javascript
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>
Solution 4 - Javascript
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://vuejs.org/v2/guide/migration.html#Replacing-the-limitBy-Filter
Solution 5 - Javascript
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>
Solution 6 - Javascript
The same goes for v-for in range:
<li v-for="n in 20 " :key="n">{{n}}</li>
Solution 7 - Javascript
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.
Solution 8 - Javascript
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">
Solution 9 - Javascript
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>
Solution 10 - Javascript
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>