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

Come posso ripetere un ciclo tramite v-forX (ad esempio 10) volte?

// want to repeat this (e.g.) 10 times

<ul>
  <li v-for="item in shoppingItems">
    {{ item.name }} - {{ item.price }}
  </li>
</ul>

La documentazione mostra:

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

ma da dove vue conosce la fonte degli oggetti? Se lo visualizzo come dice il documento, ottengo il numero di elementi e oggetti, ma senza contenuto.

È possibile utilizzare un indice in un intervallo e quindi accedere all'array tramite il suo indice:

<ul>
  <li v-for="index in 10" :key="index">
    {{ shoppingItems[index].name }} - {{ shoppingItems[index].price }}
  </li>
</ul>

Puoi anche controllare la documentazione ufficiale per ulteriori informazioni.

L'ho risolto con l'aiuto di Dov Benjamin in questo modo:

<ul>
  <li v-for="(n,index) in 2">{{ object.price }}</li>
</ul>

E un altro metodo, sia per V1.x che per 2.x di 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)
     }
  }

Ho dovuto aggiungere parseInt()per dire a v-perché stava guardando un numero.

<li v-for="n in parseInt(count)" :key="n">{{n}}</li>

Puoi utilizzare il metodo slice JS nativo:

<div v-for="item in shoppingItems.slice(0,10)">

Il metodo slice () restituisce gli elementi selezionati in un array, come un nuovo oggetto array.

Basato sul suggerimento nella guida alla migrazione: https://vuejs.org/v2/guide/migration.html#Replacing-the-limitBy-Filter

Lo stesso vale per v-for in range :

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

Nella 2.2.0+, quando si usa v-for con un componente, ora è richiesta una chiave .

<div v-for="item in items" :key="item.id">

fonte