[Vue.js] v-for로 n개씩 그려서 배열합니다.

5615 단어 JavaScriptVue.js

하고 싶은 일



이렇게 n개(이번에는 3개)를 배열하면 줄을 바꾸고 싶어요.
전제: 수조는 API 등에서 수신한 데이터로 몇 개가 올지 모른다.
v-for에서 묘사하기 전에 이런 보도를 본 적이 없기 때문에 필기입니다.

이렇게 v-for

<template>
  <div>
    <div v-for="(item, index) in array" :key="index">
      <li>{{ item }}</li>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      array: [
        'AMETHYST',
        'BLUE-SAPPHIRE',
        'CITRIN',
        'DIAMOND',
        ...
      ]
    }
  }
}
</script>

분할 배열, 3개당 v-for


컴퓨터로 그룹을 3개로 나누어 그룹에 넣습니다.
배열에서 배열된 그림을 만듭니다.

computed: {
  groupedArray() {
    const base = this.array.length
    const split_cnt = 3       // 何個ずつに分割するか
    const grouped_array = []
    for (let i=0; i<Math.ceil(base/split_cnt); i++) {
      let multiple_cnt = i * split_cnt  // 3の倍数
      // (i * 3)番目から(i * 3 + 3)番目まで取得
      let result = this.array.slice(multiple_cnt, multiple_cnt + split_cnt) 
      grouped_array.push(result)
    }
    return grouped_array
    // [
    //   ["AMETHYST", "BLUE-SAPPHIRE", "CITRIN"],
    //   ["DIAMOND", "EMERALD", "FIRE-OPAL"], ...
    // ]
  }
}
바깥쪽 배열 v-for, 그중 안쪽 배열 v-for(전달).
<div v-for="(items, index) in groupedArray" :key="index">
  <li v-for="(item, index) in items" :key="index">
    {{ item }}
  </li>
</div>
끝.

마지막


축소판 그림에 그림을 표시할 때 사용했습니다.
여러분의 참고가 될 수 있다면 좋겠습니다.

참고문


배열을 n개로 나누어 그것들을 모아 배열하다

좋은 웹페이지 즐겨찾기