소개

Vuetify로 옆에 아이템을 늘어놓고 싶다.
늘어놓은 아이템을 윈도우 사이즈에 맞추어 두는 개수를 조정하고 싶다. (두는 아이템이 많기 때문에 여러 줄 필요)
상기를 간단하게 할 수 없는지 조사하고 있었지만, 발견되지 않았기 때문에 작성했다.

대응 후의 화면

이번 대응을 실시하면 이하의 화면이 생깁니다.


＊본래는 여러가지 ID가 표시됩니다만, 샘플 때문에 나의 ID(tflare)로 하고 있습니다.
*이 화면은 작성 중이며 다른 부분이 완성되지 않았습니다.

한 일을 한마디로 말하면

창 크기를보고 (Breakpoint 사용) 한 줄에 놓을 항목의 수를 결정하고,
그리드 시스템의 행 정의와 열 정의 모두에서 루프를 잘 수행했습니다.

Breakpoints 설명은 Vuetify.js의 해당 페이지 참조

환경

"firebase": "^7.8.1",
"vue": "^2.6.10",
"vue-router": "^3.1.3",
"vuefire": "^2.2.1",
"vuetify": "^2.1.0"

모든 코드는 여기

전체 코드를 보려면 Github 또는 당 페이지의 맨 아래을 참조하십시오.
이하에서는 분할해 설명하겠습니다.

Vue 템플릿 부분

<template>
  <v-container fluid>
    <v-row v-for="(row, key) in rowCount" :key="key">
      <div v-for="(attendance, key2) in itemCountInRow(row)" :key="key2">
        <v-col>{{attendance.userID}}</v-col>
        <v-col><v-btn small color="primary">出席</v-btn><v-btn small color="error">欠席</v-btn></v-col>
        <v-divider/>
      </div>
    </v-row>
  </v-container>
</template>

아래에서 코드를 분할하여 설명합니다.

v-container

그리드 시스템의 전체 정의
앞으로 나오는 v-row(행 정의), v-col(열 정의)의 관계는 아래 그림과 같습니다.

fluid가 없으면 가운데에 배치되지만 fluid가 있으면 더 이상 없어집니다.

v-row

그리드 시스템의 행 정의

레이아웃을 정의하는 편의상 행 수를 계산합니다.
예를 내면, 20개 표시하는 아이템이 있어, 1행 10열의 경우, 2행이 됩니다.
20개 표시하는 아이템이 있어, 1행 9열의 경우, 3행이 됩니다.
즉, 다음과 같이 행 수를 정의할 수 있습니다.

행 정의

表示するアイテムの全体数　÷　1行に表示するアイテム　＝　行数（小数点以下があった場合は繰り上げ）

코드의 해당 부분은 다음과 같습니다.

행 정의

      rowCount:function(){
        return Math.ceil(this.attendances.length / this.colNumber);
      },
    },

v-col

그리드 시스템의 열(컬럼) 정의

레이아웃을 정의하는 편의상, 아이템의 어디에서 어디까지를 표시하는지를 계산합니다.
예를 내면, 20개 표시하는 아이템이 있어, 1행 10열의 경우,
1열째는 1개째부터 10개째까지 표시하면 된다
2열째는 11개째부터 20개째까지 표시하면 된다

첫 번째 줄은 0부터 시작합니다 (Array.prototype.slice([begin[, end]])의 begin은 0부터 시작하는 인덱스 0)
2행째는 열수로 시작한다 3행째는 열수×2로 시작한다
이것을 수식으로 하면 이하가 된다.

열 정의(시작)

(行数-1) × 列数

열 정의(종료)는 단순히 행 수 x 열 수로 정의할 수 있습니다.
Array.prototype.slice([begin[, end]])에 end가 지정되었을 때는, slice 는 end 자체는 포함하지 않고, 그 직전까지 꺼내기 때문입니다.

열 정의(종료)

行数×列数

열 정의(시작)와 열 정의(종료)를 코드로 하면

열 정의

    methods:{
      itemCountInRow:function(row){
        return this.attendances.slice((row - 1) * this.colNumber, row * this.colNumber)
      }
    }
  }

창 크기별 열 수 설정(Breakpoints 사용)

    computed: {
      colNumber: function() {
        let number;
        switch (this.$vuetify.breakpoint.name) {
          case 'xs': number = 2; break;
          case 'sm': number = 4; break;
          case 'md': number = 6; break;
          case 'lg': number = 8; break;
          case 'xl': number = 10; break;
        }
        return number;
      },

Breakpoints 을 이용하여 창 크기별로 한 줄에 표시할 열 수를 결정합니다.

Breakpoints를 사용하면 반응형 디자인(PC, 스마트폰 등 다른 윈도우 사이즈에서도 표시할 수 있도록 하는 디자인)을 실현하는 것이 편해집니다.
5개의 윈도우 사이즈가 정의되어 있으며, 윈도우 사이즈의 정의는 커스터마이즈도 할 수 있습니다.

attendances 정의

attendances 에 표시 대상의 아이템 (배열)이 정의되고 있습니다.
이번 설명과 관련된 것은 attendances뿐입니다.

<script>
  import firebase from 'firebase';

  export default {
    name: 'EventUser',
    data () {
      return {
        attendances: []
      }
    },

    firestore() {
      return {
        // firestoreのattendanceコレクションを参照
        attendances: firebase.firestore().collection('attendance').where("eventID", "==", Number(this.$route.params.eventID))

      }
    },

소스 코드 전체

<template>
  <v-container fluid>
    <v-row v-for="(row, key) in rowCount" :key="key">
      <div v-for="(attendance, key2) in itemCountInRow(row)" :key="key2">
        <v-col>{{attendance.userID}}</v-col>
        <v-col><v-btn small color="primary">出席</v-btn><v-btn small color="error">欠席</v-btn></v-col>
        <v-divider/>
      </div>
    </v-row>
  </v-container>
</template>

<script>
  import firebase from 'firebase';

  export default {
    name: 'EventUser',

    data () {
      return {
        attendances: []
      }
    },

    firestore() {
      return {
        // firestoreのattendanceコレクションを参照
        attendances: firebase.firestore().collection('attendance').where("eventID", "==", Number(this.$route.params.eventID))

      }
    },

    computed: {
      colNumber: function() {
        let number;
        switch (this.$vuetify.breakpoint.name) {
          case 'xs': number = 2; break;
          case 'sm': number = 4; break;
          case 'md': number = 6; break;
          case 'lg': number = 8; break;
          case 'xl': number = 10; break;
        }
        return number;
      },

      rowCount:function(){
        return Math.ceil(this.attendances.length / this.colNumber);
      },
    },

    methods:{
      itemCountInRow:function(row){
        return this.attendances.slice((row - 1) * this.colNumber, row * this.colNumber)
      }
    }
  }

</script>

참고

htps : // js 푹 dぇ. 네 t/z11후07p/421/
rowCount와 itemCountInRow는 상기를 참고로 하고 있습니다.

감상

좀 더 쉽게 할 수 있는 방법이 있다고 생각합니다.
뭔가 있으면 코멘트를 부탁드립니다.