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   lt ul gt     lt li v-for  item in shoppingItems  gt         item name    -    item price       lt  li gt   lt  ul gt    The documentation shows    lt ul gt     lt li v-for  item in 10  gt    item    lt  li gt   lt  ul gt      or    lt li v-for  n in 10  gt    n     lt  li gt      this doesn t work   lt li v-for  item in 10  gt    item price    lt  li gt    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

User · Answer

You can use the native JS slice method    lt div v-for  item in shoppingItems slice 0 10   gt      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

User · Answer

In 2 2 0   when using v-for with a component  a key is now required    lt div v-for  item in items   key  item id  gt    Source

User · Answer

You can use an index in a range and then access the array via its index    lt ul gt     lt li v-for  index in 10   key  index  gt         shoppingItems index  name    -    shoppingItems index  price       lt  li gt   lt  ul gt    You can also check the Official Documentation for more information

User · Answer

I have solved it with Dov Benjamin s help like that    lt ul gt     lt li v-for   n index  in 2  gt    object price    lt  li gt   lt  ul gt    And another method  for both V1 x and 2 x of vue js  Vue 1    lt p v-for  item in items   limitBy 10  gt    item    lt  p gt   Vue2      Via slice method in computed prop   lt p v-for  item in filteredItems  gt    item    lt  p gt   computed       filteredItems  function           return this items slice 0  10

User · Answer

The same goes for  v-for in range    lt li v-for  n  in 20    key  n  gt   n   lt  li gt

User · Answer

I had to add parseInt   to tell v-for it was looking at a number    lt li v-for  n in parseInt count    key  n  gt   n   lt  li gt

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

Examples related to javascript

Examples related to vue.js

Examples related to vuejs2

Examples related to v-for