Vue Js - Boucle via v-for X fois (dans une plage)

Comment puis-je répéter une boucle via v-forX (par exemple 10) fois?

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

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

La documentation montre:

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

mais d'où la vue connaît-elle la source des objets? Si je le rend comme le dit le document, j'obtiens le nombre d'éléments et d'éléments, mais sans contenu.

Vous pouvez utiliser un index dans une plage puis accéder au tableau via son index:

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

Vous pouvez également consulter la documentation officielle pour plus d'informations.

Je l'ai résolu avec l'aide de Dov Benjamin comme ça:

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

Et une autre méthode, pour les deux V1.x et 2.x de 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)
     }
  }

J'ai dû ajouter parseInt()pour dire à v-car il cherchait un nombre.

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

Vous pouvez utiliser la méthode de tranche JS native:

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

La méthode slice () renvoie les éléments sélectionnés dans un tableau, en tant que nouvel objet tableau.

Basé sur l'astuce du guide de migration: https://vuejs.org/v2/guide/migration.html#Replacing-the-limitBy-Filter

Il en va de même pour v-for in range :

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

Dans la version 2.2.0+, lors de l'utilisation de v-for avec un composant, une clé est désormais requise .

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

La source