Vue Js - X kez v üzerinden döngü (bir aralıkta)

Bir döngüyü v-forX (örneğin 10) kez nasıl tekrar edebilirim ?

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

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

Belgeler şunları gösterir:

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

ama vue nesnelerin kaynağını nereden biliyor? Dokümanın dediği gibi işlersem, öğelerin ve öğelerin sayısını içerik olmadan alırım.

Bir aralıktaki bir dizini kullanabilir ve ardından diziye dizini aracılığıyla erişebilirsiniz:

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

Daha fazla bilgi için Resmi Belgeleri de inceleyebilirsiniz.

Bunu Dov Benjamin'in yardımıyla çözdüm:

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

Ve vue.js'nin hem V1.x hem de 2.x'i için başka bir yöntem

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

Yerel JS dilim yöntemini kullanabilirsiniz:

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

Slice () yöntemi, yeni bir dizi nesnesi olarak bir dizideki seçili öğeleri döndürür.

Geçiş kılavuzundaki ipucuna göre: https://vuejs.org/v2/guide/migration.html#Replacing-the-limitBy-Filter

parseInt()Bir sayıya baktığını söylemek için eklemek zorunda kaldım .

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

Aynısı aralık içi v-for için de geçerlidir :

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

2.2.0+ sürümünde, v-for'u bir bileşenle kullanırken, artık bir anahtar gereklidir .

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

Kaynak