Vue Js-v-for X 회 (범위 내)를 통한 루프

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>

자세한 내용 은 공식 문서 를 확인할 수도 있습니다 .

---

Dov Benjamin의 도움으로 다음과 같이 해결했습니다.

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

감사합니다 Coders!

다음에 봐

---

기본 JS 슬라이스 방법을 사용할 수 있습니다.

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

slice () 메서드는 배열에서 선택한 요소를 새 배열 객체로 반환합니다.

마이그레이션 가이드의 팁 : https://vuejs.org/v2/guide/migration.html#Replacing-the-limitBy-Filter

---

I had to add parseInt() to tell v-for it was looking at a number.

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

---

The same goes for v-for in range:

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

---

In 2.2.0+, when using v-for with a component, a key is now required.

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

Source

---

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>

ReferenceURL : https://stackoverflow.com/questions/44617484/vue-js-loop-via-v-for-x-times-in-a-range