Vue Js - цикл через 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>

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


javascript vue.js vuejs2 v-for
person MikeCaine    schedule 18.06.2017    source источник
comment
К сожалению, это не работает, но спасибо   -  person MikeCaine    schedule 18.06.2017
comment
Почему бы вам просто не повторить shoppingItems?   -  person Bert    schedule 18.06.2017
comment
Хай Берт - Я только хочу знать, как дать v-for (простейший способ) a (x) количество повторов, а пример в документе не работает ...... .... в чистом js + ajax это так просто return ‹9 или или или, но это не работает в методе ...   -  person MikeCaine    schedule 18.06.2017
comment
Есть два различных режима v-for; когда он вызывается для целого числа и когда он вызывается для массива. Смешивание этих режимов и попытка использовать целое число для управления доступом к содержимому массива может вызвать проблемы. Если вам нужно подмножество массива, вы можете его отфильтровать.   -  person Jason Aller    schedule 02.03.2018

Ответы (6)


arrow_upward
243
arrow_downward

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

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

Обратите внимание, что это индексируется 1: в первой итерации index равно 1, а во второй итерации index равно 2 и так далее.

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

person Dov Benyomin Sohacheski    schedule 18.06.2017
comment
Это работает :) Я немного изменил его на ‹li v-for = (n, index) в 2› {{shoppingItems.price}} ‹/li› ==== MNY THXXXX Coder *****! ==== - person MikeCaine; 18.06.2017
comment
Как сделать это 10 переменной ?, сформировать данные компонента? - person alvaro; 26.03.2019
comment
Почему это 1-индексируется, мне совершенно непонятно. <span v-for="i in 5">{{i}} </span> = ›1 2 3 4 5. Используйте <span v-for="(e, i) in 5">{{i}} </span>, чтобы получить нулевую индексацию. - person ggorlen; 28.08.2019
comment
Я заметил, что вы должны написать shoppingItems [index -1] .name для перебора всего массива - person peschanko; 23.10.2019
comment
@ggorlen директива v-for отличается от стандартного цикла for в JS. Первый аргумент - это псевдоним для элемента массива (не индекса) в стандартном варианте использования. Индекс задается как второй элемент, поэтому (e, i) возвращает элемент и его индекс. При использовании v-for="n in 10" n - это элемент, который, я думаю, имеет индекс + 1. Итак, ваше решение правильное: чтобы получить индекс, используйте v-for="(n, i) in 10", где n - индексируется 1, а i - индексируется 0. Подробная информация о директиве находится на странице vuejs.org/v2/guide/list.html. - person phip; 06.01.2021

arrow_upward
46
arrow_downward

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

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

Обратите внимание, что в этом случае n индексируется 1, а index индексируется 0.

И еще один метод для 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)
     }
  }
person MikeCaine    schedule 18.06.2017

arrow_upward
26
arrow_downward

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

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

person jmbmage    schedule 20.03.2019
comment
Обратите внимание, что это 1-индексный. - person Flimm; 10.06.2021

arrow_upward
21
arrow_downward

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

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

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

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

person NickGreen    schedule 31.01.2018
comment
Спасибо лучший ответ - person Shujat Munawar; 21.04.2020

arrow_upward
5
arrow_downward

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

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

person besthost    schedule 16.05.2018
comment
Сначала проверьте ответ tdhulster. - person besthost; 16.05.2018

arrow_upward
1
arrow_downward

В версии 2.2.0+ при использовании v-for с компонентом ключ теперь необходим.

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

Источник

person tdhulster    schedule 08.04.2018