Vue Js - Loop via v para X vezes (em um intervalo)

108

Como posso repetir um loop via v-forX (por exemplo, 10) vezes?

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

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

A documentação mostra:

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

mas de onde vue sabe a origem dos objetos? Se eu renderizá-lo como o documento diz, obtenho o número de itens e itens, mas sem conteúdo.

— MikeCaine
fonte

Infelizmente isso não funciona, mas obrigado

— MikeCaine

Por que você simplesmente não itera o shoppingItems?

— Bert

1

Hy Bert - Eu só quero saber como dar um v-para (a maneira mais simples) a (x) número de repetições e o exemplo no doc não funciona ...... .... em puro js + ajax é um retorno tão simples <9 ou ou ou, mas isso não funciona no método ...

— MikeCaine

Existem dois modos distintos para v-for; quando é chamado contra um inteiro e quando é chamado contra um array. Misturar esses modos e tentar usar um número inteiro para controlar o acesso ao conteúdo de uma matriz provavelmente causará problemas. Se você precisar de um subconjunto da matriz, poderá filtrá-lo.

— Jason Aller,

172

Você pode usar um índice em um intervalo e acessar a matriz por meio de seu índice:

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

Você também pode verificar a documentação oficial para obter mais informações.

— Dov Benyomin Sohacheski
fonte

3

Funciona: :) Eu mudei ligeiramente para <li v-for = "(n, index) in 2"> {{shoppingItems.price}} </li> ==== MNY THXXXX Coder ***** ! ====

— MikeCaine de

Como fazer daquele 10 uma variável ?, formar os dados do componente?

— Alvaro

6

Por que isso é indexado 1 está completamente além de mim. <span v-for="i in 5">{{i}} </span>=> 1 2 3 4 5. Use <span v-for="(e, i) in 5">{{i}} </span>para obter 0-indexação.

— ggorlen

Percebi que você deve escrever shoppingItems [index -1] .name para iterar em toda a matriz

— peschanko

25

Eu resolvi isso com a ajuda de Dov Benjamin assim:

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

E outro método, para V1.x e 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
fonte

14

Tive de acrescentar parseInt()para dizer a v - pois estava olhando para um número.

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

— abbaf33f
fonte

12

Você pode usar o método de fatia JS nativo:

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

O método slice () retorna os elementos selecionados em uma matriz, como um novo objeto de matriz.

Com base na dica do guia de migração: https://vuejs.org/v2/guide/migration.html#Replacing-the-limitBy-Filter

— NickGreen
fonte

Obrigado, melhor resposta

— Solution Spirit

4

O mesmo vale para v-for no intervalo :

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

— besthost
fonte

1

Verifique a resposta tdhulster primeiro.

— besthost de

1

No 2.2.0+, ao usar v-for com um componente, uma chave agora é necessária .

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

Fonte

— tdhulster
fonte