서로 다른 시작점과 끝점으로 어레이 반복

서로 다른 시작점과 끝점으로 어레이 반복

시작과 끝점이 서로 다른 json 어레이에서 반복하는 방법

예를 들어, 20개 항목의 목록을 말한다.

리스트를 0-4, 5-9, 10-14, 15-19...

다른 옵션으로 v-for 구문을 시도해 보았지만 제대로 작동하지 않는다.

  <tr v-for="(user, index) in json.users">

첫 번째 루프에서는 사용자[0], 두 번째 루프에서는 사용자[5], 그리고 두 번째 루프에서는 사용자[9]...

나는 한번에 모든 루프를 반복하고 싶지 않다.나는 그것을 분할해서 갈아야 한다.

템플릿에서 배열을 슬라이스할 수 있음:

<div v-for="item in items.slice(0, 4)>
  {{ item }}
</div>

예를 들면 다음과 같다.

new Vue({
  el: '#app',
  data() {
    return {
      items: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25]
    }
  }
})

ul { border: 1px goldenrod solid; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  <ul v-for="i in 5">
    <li v-for="item in items.slice((i-1)*5, (i-1)*5+5)">
      {{ item }}
    </li>
  </ul>
</div>

---

또는 다음과 같이 표시하기 쉬운 방법으로 데이터를 구성하기 위해 계산된 속성을 생성할 수 있다.

new Vue({
  el: '#app',
  data() {
    return {
      items: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25]
    }
  },
  computed: {
    sections() {
      let sections = [], size = 5;
      let items = [...this.items];

      while (items.length > 0)
        sections.push(items.splice(0, size));
        
      return sections;
    }
  }     
})

ul { border: 1px goldenrod solid; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  <ul v-for="items in sections">
    <li v-for="item in items">
      {{ item }}
    </li>
  </ul>
</div>

범위 및 슬라이스에 v-을 사용하십시오.

Vuejs는 범위 내에서 v-for를 지원한다.

https://vuejs.org/v2/guide/list.html#v-for-with-a-Range

<div v-for="n in (items.length / 5)">
  <div v-for="item in items.slice(n*5, n*5 + 5)>
    {{ item }}
  </div>
</div>

다음 코드는 완료되지 않으며 목록이 5의 배수가 아닐 때 수정해야 한다는 점에 유의하십시오.

다음은 8시까지 항목을 그룹화하는 데 도움이 될 수 있는 몇 가지 코드 입니다.

<div v-for="i in (dataAll.length/8)">
    <div v-for="(item, key, index) in dataAll.slice((i*8)-8, (i*8))">
    {{ item }}
    </div>
</div>

참조URL: https://stackoverflow.com/questions/47224745/iterate-array-with-different-start-and-end-points