¿Cómo puedo repetir un bucle a través v-for X (por ejemplo, 10) veces?
// want to repeat this (eg) 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 sabe vue el origen de los objetos? Si lo renderizo como dice el documento, obtengo la cantidad de elementos y elementos, pero sin contenido.
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> Tenga en cuenta que esto tiene un índice de 1: en la primera iteración, el index es 1, y en la segunda iteración, el index es 2, y así sucesivamente.
También puedes consultar la Documentación Oficial para más información.
Lo he resuelto con la ayuda de Dov Benjamin así:
<ul> <li v-for="(n,index) in 2">{{ n }}, {{ index }}</li> </ul> Tenga en cuenta que en este caso, n tiene un índice de 1 y index tiene un índice de 0.
Y otro método, tanto para V1.x como para 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) } }Tuve que agregar parseInt() para decirle a v-for estaba mirando un número.
<li v-for="n in parseInt(count)" :key="n">{{n}}</li>