Vue Js - Цикл через v-for X разів (в діапазоні)

Як я можу повторити цикл через v-forX (наприклад, 10) разів?

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

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

Документація показує:

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

але звідки vue знає джерело об’єктів? Якщо я відтворюю це, як сказано в документі, я отримую кількість предметів і предметів, але без вмісту.

Ви можете використовувати індекс у діапазоні, а потім отримати доступ до масиву через його індекс:

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

Ви також можете переглянути офіційну документацію для отримання додаткової інформації.

Я вирішив це за допомогою Дова Бенджаміна так:

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

І ще один метод, як для V1.x, так і для 2.x 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)
     }
  }

Мені довелося додати, parseInt()щоб сказати v-для того, що він дивився на номер.

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

Ви можете використовувати власний метод зрізу JS:

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

Метод slice () повертає вибрані елементи в масиві як новий об’єкт масиву.

На основі підказки в керівництві з міграції: https://vuejs.org/v2/guide/migration.html#Replacing-the-limitBy-Filter

Те саме стосується v-for в діапазоні :

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

У версії 2.2.0+ при використанні v-for з компонентом тепер потрібен ключ .

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

Джерело