Vue Js - Loop via v-for X times (in a range)
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.
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) } }
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>