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

112

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.

javascript vue.js vuejs2 v-for MikeCaine
la source
Malheureusement, cela ne fonctionne pas, mais merci
MikeCaine
Pourquoi ne pas simplement parcourir ShoppingItems?
Bert
1
Hy Bert - Je veux seulement savoir comment donner un v-pour (la manière la plus simple) un (x) nombre de répétitions et l'exemple dans la doc ne fonctionne pas ...... .... en pur js + ajax son retour si simple <9 ou ou ou, mais cela ne fonctionne pas dans la méthode ...
MikeCaine
Il existe deux modes distincts pour v-for; quand il est appelé contre un entier, et quand il est appelé contre un tableau. Mélanger ces modes et essayer d'utiliser un entier pour contrôler l'accès au contenu d'un tableau est susceptible de poser des problèmes. Si vous avez besoin d'un sous-ensemble du tableau, vous pouvez le filtrer.
Jason Aller

Réponses:

178

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.

Dov Benyomin Sohacheski
la source
3
Cela fonctionne: :) ​​Je l'ai légèrement changé en <li v-for = "(n, index) in 2"> {{shoppingItems.price}} </li> ==== MNY THXXXX Coder ***** ! ====
MikeCaine
1
Comment faire de ce 10 une variable?, Former les données du composant?
alvaro
7
Pourquoi c'est indexé 1 me dépasse complètement. <span v-for="i in 5">{{i}} </span>=> 1 2 3 4 5. Utilisez <span v-for="(e, i) in 5">{{i}} </span>pour obtenir une indexation 0.
ggorlen
J'ai remarqué que vous devriez écrire shoppingItems [index -1] .name pour parcourir tout le tableau
peschanko
25

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)
     }
  }
MikeCaine
la source
14

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

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

Ansielf
la source
12

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

NickGreen
la source
Merci, meilleure réponse
Solution Spirit
4

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

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

besthost
la source
1
Veuillez d'abord vérifier la réponse de tdhulster .
besthost
1

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

tdhulster
la source