Vue Js - Boucle via v-for X fois (dans un intervalle)

Question

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 j'effectue le rendu comme indiqué dans la documentation, j'obtiens le nombre d'éléments et d'éléments, mais sans contenu.

Answer 1

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

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

Notez qu'il s'agit d'une indexation 1 : à la première itération, index est 1, et dans la deuxième itération, index est égal à 2, et ainsi de suite.

Vous pouvez également vérifier le Documentation officielle pour plus d'informations.

Answer 2

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

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

Notez que dans ce cas, n est 1-indexé, et index est indexé à 0.

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

Answer 3

J'ai dû ajouter parseInt() pour dire à V. qu'il regardait un nombre.

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

Answer 4

Vous pouvez utiliser la méthode de découpage 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, sous la forme d'un nouvel objet tableau.

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

Answer 5

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

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