web-dev-qa-db-fra.com

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

Comment puis-je répéter une boucle via v-for X (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ù vue connaît-il la source des objets? Si je le restitue comme le dit la doc, j'obtiens le nombre d'éléments et d'éléments, mais sans contenu.

javascriptvue.jsvuejs2v-for
52
MikeCaine

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 le Documentation officielle pour plus d'informations.

95
Dov Benyomin Sohacheski

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>

& une autre méthode j'ai cherché et trouvé

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

Merci les codeurs!

À plus

9
MikeCaine

Vous pouvez utiliser la méthode de découpe 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 de tableau.

D'après le conseil du guide de migration: https://vuejs.org/v2/guide/migration.html#Replacing- the-limitBy-Filter

6
NickGreen

Je devais ajouter parseInt() pour dire à v-car il s'agissait d'un nombre.

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

4
abbaf33f

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

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

2
besthost

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

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

Source

1
tdhulster
var itemArray = ["item1", "item2", "item3", "item4", "item4"]
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<ul>
  <li v-for="item in itemArray">
    {{item}}
  </li>
</ul>
0
Abdullah Pariyani