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

javascript vue.js vuejs2 v-for
MikeCaine picture MikeCaine · Jun 18, 2017 · Viewed 165.4k times · Source

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.

Answer

Dov Benyomin Sohacheski picture Dov Benyomin Sohacheski · Jun 18, 2017

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>

You can also check the Official Documentation for more information.

Related questions

Vue.js v-for loop from an object key and nested array

I have quiet a complex v-for loop inside another v-for. Basically displays a list of questions and a list of answers for that question. I plan on getting the key for the question and using that for the key for …

Read More
Vue.js - Use filter inside v-for

I have a simple Vue filter that limits the length of an array to n elements. It works fine used like this: {{ array | limitArray(2) }} Now I'd like to use it inside a v-for loop, like this: <li v-for="item …

Read More
How to listen for 'props' changes

In the VueJs 2.0 docs I can't find any hooks that would listen on props changes. Does VueJs have such hooks like onPropsUpdated() or similar? Update As @wostex suggested, I tried to watch my property but nothing changed. Then I realized …

Read More