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

vue.js vuejs2

Question

¿Cómo puedo repetir un ciclo a través de v-for X (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 ¿desde dónde conoce la fuente de los objetos? Si lo renderizo como dice el documento, obtengo la cantidad de elementos y elementos, pero sin contenido.

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

Source

Answer 2

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 que busqué y encontré

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

Gracias codificadores!

Nos vemos

Answer 3

Lo mismo ocurre con v-for en el rango :

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

Answer 4

Puede usar el método de corte 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.

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

Answer 5

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.

Answer 6

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>

Answer 7

var itemArray = ["item1", "item2", "item3", "item4", "item4"]

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<ul>
  <li v-for="item in itemArray">
    {{item}}
  </li>
</ul>