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는 객체의 출처를 어디에서 알고 있습니까? 문서가 말하는 것처럼 렌더링하면 항목과 항목의 수를 얻지 만 내용은 없습니다.
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- 인덱싱을 얻기 위해 사용 합니다.
Dov Benjamin의 도움으로 다음과 같이 해결했습니다.
<ul>
<li v-for="(n,index) in 2">{{ object.price }}</li>
</ul>그리고 vue.js의 V1.x 및 2.x에 대한 또 다른 방법
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)">
slice () 메서드는 배열에서 선택한 요소를 새 배열 객체로 반환합니다.
마이그레이션 가이드의 팁 : https://vuejs.org/v2/guide/migration.html#Replacing-the-limitBy-Filter