Vue Js - Loop через v-для X раз (в диапазоне)

Как я могу повторить цикл через v-for X (например, 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>

но откуда известно, что источник объектов? Если я сделаю это, как говорит док, я получаю количество элементов и элементов, но без содержимого.

Ответ 1

Вы можете использовать индекс в диапазоне, а затем обращаться к массиву через его индекс:

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

Вы также можете проверить официальную документацию для получения дополнительной информации.

Ответ 2

Я решил это с помощью Дова Беньямина:

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

& другой метод, который я искал и нашел

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

Спасибо кодеры!

До встречи

Ответ 3

Вы можете использовать собственный метод среза JS:

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

Метод slice() возвращает выбранные элементы в массиве как новый объект массива.

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

Ответ 4

Мне пришлось добавить parseInt() чтобы сказать v-для того, что он смотрит на число.

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

Ответ 5

То же самое относится к v-для диапазона:

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

Ответ 6

В 2.2. 0+ при использовании v-for с компонентом теперь требуется ключ.

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

Источник

Ответ 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>