Vue Js - Schleife über v-für X-mal (in einem Bereich)

106

Wie kann ich eine Schleife über v-forX (zB 10) Mal wiederholen ?

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

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

Die Dokumentation zeigt:

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

aber woher kennt vue die quelle der objekte? Wenn ich es wie im Dokument angegeben rendere, erhalte ich die Anzahl der Elemente und Elemente, jedoch ohne Inhalt.

javascript vue.js vuejs2 v-for MikeCaine
quelle
Leider funktioniert das nicht, aber danke
MikeCaine
Warum würden Sie nicht einfach ShoppingItems iterieren?
Bert
1
Hy Bert - Ich möchte nur wissen, wie man einem v-for (auf einfachste Weise) eine (x) Anzahl von Wiederholungen gibt, und das Beispiel im Dokument funktioniert nicht ...... .... in reinem js + Ajax seine so einfache Rückkehr <9 oder oder oder, aber das funktioniert nicht in der Methode ...
MikeCaine
Es gibt zwei verschiedene Modi v-for; wenn es gegen eine ganze Zahl aufgerufen wird und wenn es gegen ein Array aufgerufen wird. Das Mischen dieser Modi und der Versuch, eine Ganzzahl zu verwenden, um den Zugriff auf den Inhalt eines Arrays zu steuern, kann Probleme verursachen. Wenn Sie eine Teilmenge des Arrays benötigen, können Sie diese filtern.
Jason Aller

Antworten:

171

Sie können einen Index in einem Bereich verwenden und dann über seinen Index auf das Array zugreifen:

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

Weitere Informationen finden Sie auch in der offiziellen Dokumentation .

Dov Benyomin Sohacheski
quelle
2
Es funktioniert: :) Ich habe es leicht in <li v-for = "(n, index) in 2" geändert.> {{ShoppingItems.price}} </ li> ==== MNY THXXXX Coder ***** ! ====
MikeCaine
Wie macht man diese 10 zu einer Variablen?, Bildet man die Daten der Komponente?
Alvaro
5
Warum dies 1-indiziert ist, ist mir völlig unverständlich. <span v-for="i in 5">{{i}} </span>=> 1 2 3 4 5. Verwenden Sie <span v-for="(e, i) in 5">{{i}} </span>diese Option , um eine 0-Indizierung zu erhalten.
Ggorlen
Mir ist aufgefallen, dass Sie
purchaseItems
23

Ich habe es mit Dov Benjamins Hilfe so gelöst:

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

Und eine andere Methode für V1.x und 2.x von 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
quelle
13

Ich musste hinzufügen parseInt(), um v-for zu sagen, dass es sich um eine Nummer handelte.

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

abbaf33f
quelle
12

Sie können die native JS-Slice-Methode verwenden:

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

Die Slice () -Methode gibt die ausgewählten Elemente in einem Array als neues Array-Objekt zurück.

Basierend auf dem Tipp im Migrationshandbuch: https://vuejs.org/v2/guide/migration.html#Replacing-the-limitBy-Filter

NickGreen
quelle
Danke, beste Antwort
Solution Spirit
3

Gleiches gilt für v-for in range :

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

besthost
quelle
1
Bitte überprüfen Sie zuerst die Antwort von tdhulster .
Besthost
1

In 2.2.0+ ist jetzt bei Verwendung von v-for mit einer Komponente ein Schlüssel erforderlich .

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

Quelle

tdhulster
quelle