Vue Js: bucle a través de v durante X veces (en un rango)

112

¿Cómo puedo repetir un bucle a través de v-forX (por ejemplo, 10) veces?

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

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

La documentación muestra:

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

pero ¿de dónde conoce vue el origen de los objetos? Si lo renderizo como dice el documento, obtengo la cantidad de elementos y elementos, pero sin contenido.

javascript vue.js vuejs2 v-for MikeCaine
fuente
Desafortunadamente eso no funciona, pero gracias
MikeCaine
¿Por qué no repetirías shoppingItems?
Bert
1
Hy Bert - Solo quiero saber cómo dar una v-para (la forma más simple) un (x) número de repeticiones y el ejemplo en el documento no funciona ...... .... en js puro + ajax es tan simple retorno <9 o o o, pero esto no funciona en el método ...
MikeCaine
Hay dos modos distintos de v-for; cuando se llama a un número entero y cuando se llama a una matriz. Es probable que la combinación de esos modos y el uso de un número entero para controlar el acceso al contenido de una matriz cause problemas. Si necesita un subconjunto de la matriz, puede filtrarlo.
Jason Aller

Respuestas:

178

Puede usar un índice en un rango y luego acceder a la matriz a través de su índice:

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

También puede consultar la Documentación Oficial para obtener más información.

Dov Benyomin Sohacheski
fuente
3
Funciona: :) Lo he cambiado ligeramente a <li v-for = "(n, index) in 2"> {{shoppingItems.price}} </li> ==== MNY THXXXX Coder ***** ! ====
MikeCaine
1
¿Cómo convertir ese 10 en una variable ?, ¿forman los datos del componente?
alvaro
7
Por qué esto está indexado a 1 está completamente fuera de mi comprensión. <span v-for="i in 5">{{i}} </span>=> 1 2 3 4 5. Úselo <span v-for="(e, i) in 5">{{i}} </span>para obtener la indexación 0.
ggorlen
Me di cuenta de que debería escribir shoppingItems [índice -1] .name para iterar sobre toda la matriz
peschanko
25

Lo he resuelto con la ayuda de Dov Benjamin así:

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

Y otro método, tanto para V1.xy 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
fuente
14

Tuve que agregar parseInt()para decirle a v-porque estaba mirando un número.

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

ansielf
fuente
12

Puede utilizar el método de segmento JS nativo:

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

El método slice () devuelve los elementos seleccionados en una matriz, como un nuevo objeto de matriz.

Basado en el consejo de la guía de migración: https://vuejs.org/v2/guide/migration.html#Replacing-the-limitBy-Filter

NickGreen
fuente
Gracias, la mejor respuesta
Solution Spirit
4

Lo mismo ocurre con v-for en rango :

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

besthost
fuente
1
Compruebe primero la respuesta de tdhulster .
besthost
1

En 2.2.0+, cuando se usa v-for con un componente, ahora se requiere una clave .

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

Fuente

tdhulster
fuente