Vue Js - pętla przez v-for X razy (w zakresie)

117

Jak mogę powtórzyć pętlę przez v-forX (np. 10) razy?

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

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

Dokumentacja pokazuje:

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

ale skąd vue zna źródło obiektów? Jeśli wyrenderuję to tak, jak mówi dokument, otrzymam liczbę elementów i elementów, ale bez treści.

javascript vue.js vuejs2 v-for MikeCaine
źródło
Niestety to nie działa, ale dzięki
MikeCaine
Dlaczego nie miałbyś po prostu powtórzyć shoppingItems?
Bert
1
Hy Bert - Chcę tylko wiedzieć, jak podać v-for (najprostszy sposób) a (x) liczbę powtórzeń, a przykład w dokumencie nie działa ...... .... w czystym js + Ajax to tak prosty zwrot <9 lub lub lub, ale to nie działa w metodzie ...
MikeCaine
Istnieją dwa różne tryby v-for; kiedy jest wywoływana względem liczby całkowitej i kiedy jest wywoływana względem tablicy. Mieszanie tych trybów i próba użycia liczby całkowitej do kontrolowania dostępu do zawartości tablicy może spowodować problemy. Jeśli potrzebujesz podzbioru tablicy, możesz go przefiltrować.
Jason Aller

Odpowiedzi:

187

Możesz użyć indeksu w zakresie, a następnie uzyskać dostęp do tablicy poprzez jej indeks:

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

Więcej informacji można znaleźć w oficjalnej dokumentacji .

Dov Benyomin Sohacheski
źródło
3
To działa: :) Zmieniłem go nieznacznie na <li v-for = "(n, index) w 2"> {{shoppingItems.price}} </li> ==== MNY THXXXX Koder ***** ! ====
MikeCaine
1
Jak uczynić to 10 zmienną ?, utworzyć dane komponentu?
alvaro
8
Dlaczego to jest indeksowane 1, jest całkowicie poza mną. <span v-for="i in 5">{{i}} </span>=> 1 2 3 4 5. Użyj, <span v-for="(e, i) in 5">{{i}} </span>aby uzyskać indeksowanie 0.
ggorlen
Zauważyłem, że powinieneś napisać shoppingItems [indeks -1] .name, aby iterować po całej tablicy
peschanko
28

Rozwiązałem to z pomocą Dova Benjamina w ten sposób:

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

I jeszcze jedna metoda, zarówno dla V1.x, jak i 2.x 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
źródło
15

Musiałem dodać, parseInt()żeby powiedzieć v - ponieważ patrzył na liczbę.

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

jmb-mage
źródło
14

Możesz użyć natywnej metody wycinka JS:

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

Metoda slice () zwraca wybrane elementy tablicy jako nowy obiekt tablicy.

Na podstawie wskazówki w przewodniku migracji: https://vuejs.org/v2/guide/migration.html#Replacing-the-limitBy-Filter

NickGreen
źródło
Dzięki, najlepsza odpowiedź
Solution Spirit
5

To samo dotyczy v-for in range :

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

besthost
źródło
1
Najpierw sprawdź odpowiedź tdhulster .
besthost
1

W wersji 2.2.0+, gdy używasz v-for z komponentem, klucz jest teraz wymagany .

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

Źródło

tdhulster
źródło