Как я могу повторить цикл через 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 знает источник объектов? Если я визуализирую его, как сказано в документе, я получаю количество элементов и элементов, но без содержимого.
javascript
vue.js
vuejs2
v-for
Майк Кейн
источник
источник
v-for; когда он вызывается для целого числа, и когда он вызывается для массива. Смешивание этих режимов и попытка использовать целое число для управления доступом к содержимому массива может вызвать проблемы. Если вам нужно подмножество массива, вы можете его отфильтровать.Ответы:
Вы можете использовать индекс в диапазоне, а затем получить доступ к массиву через его индекс:
<ul> <li v-for="index in 10" :key="index"> {{ shoppingItems[index].name }} - {{ shoppingItems[index].price }} </li> </ul>Вы также можете проверить официальную документацию для получения дополнительной информации.
источник
<span v-for="i in 5">{{i}} </span>=>1 2 3 4 5. Используйте<span v-for="(e, i) in 5">{{i}} </span>для получения 0-индексации.Я решил это с помощью Дова Бенджамина вот так:
<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) } }источник
Вы можете использовать собственный метод JS-среза:
<div v-for="item in shoppingItems.slice(0,10)">На основе совета в руководстве по миграции: https://vuejs.org/v2/guide/migration.html#Replacing-the-limitBy-Filter
источник
Мне пришлось добавить,
parseInt()чтобы сказать v, потому что он смотрел на число.<li v-for="n in parseInt(count)" :key="n">{{n}}</li>источник
То же самое и для v-for in range :
<li v-for="n in 20 " :key="n">{{n}}</li>источник
В версии 2.2.0+ при использовании v-for с компонентом теперь требуется ключ .
<div v-for="item in items" :key="item.id">Источник
источник