Vue + Vuetify を組み合わせて受賞歴の年表を作ってみる【サンプルコードあり】｜ProgLearn

みなさん、こんにちは。どんぶラッコです。

先日、ピアノ教室のサイトを改修してた時にコンクールの受賞歴年表を作って欲しいと言われました。

そこで、Vueでコンポーネント化してこのような年表を作ってみました。

左側に年とコンクール名・右側に結果を表示する一覧リストです。

スマートフォン表示にも対応しています。

今回はこの年表を作った実際のコードと、その実装ポイントをご紹介します

どんぶラッコ

データは配列+オブジェクト形式で指定してあげればOKだよ！

どんぶラッコ

あとはタイトルにも書いてある通り、 Vue と Vuetify が予めセットアップされているという前提で記載します

サンプルコード

<template>
  <div>
    <div v-for="award in awards" :key="award.year">
      <div class="font-weight-bold caption secondary--text">
        {{ award.year }}年
      </div>
      <div class="ml-2">
        <div
          v-for="(content, index) in award.contents"
          :key="index"
          class="d-block d-sm-flex justify-space-between"
        >
          <!-- xs, sm -->
          <div class="d-block d-md-none caption">
            {{ content.text }}
          </div>
          <div class="font-weight-bold caption d-block d-md-none align-center" style="width: 200px;">
            <v-icon color="black" x-small class="mr-1">
              mdi-trophy
            </v-icon>
            {{ content.result }}
          </div>
          <!-- md -->
          <div class="d-none d-md-block">
            {{ content.text }}
          </div>
          <div class="font-weight-bold d-none d-md-flex align-center" style="width: 280px;">
            <v-icon color="black" small class="mr-2">
              mdi-trophy
            </v-icon>
            {{ content.result }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      awards: [
        {
          year: 2020,
          contents: [
            {
              text: 'hogehogeコンクール',
              result: '優勝'
            }
          ]
        },
      ]
    }
  }
}
</script>

まずは data() を確認していきましょう。

今回は awards という配列を用意しています。

awards: [
	{
	  year: 2020,
	  contents: [
	    {
	      text: 'hogehogeコンクール',
	      result: '優勝'
	    }
	  ]
	},
]

中身はその年の数字と contents 配列を持っています。 contents を配列にしているのは、当該の年に複数の出来事がある場合に対応するためです。

これらのデータを v-for を2回使って回しています。

<template>
  <div>
    <div v-for="award in awards" :key="award.year">
      ...中略1
      <div>
        <div
          v-for="(content, index) in award.contents"
          :key="index"
        >
          ...中略2
        </div>
      </div>
    </div>
  </div>
</template>

中略2のなかでブレイクポイントに応じてdiv要素の出しわけを指定しています。出しわけについては、今回は Vuetify 内のクラスを利用しています。

  <!-- xs, sm -->
  <div class="d-block d-md-none">
    {{ content.text }}
  </div>
  ...
  <!-- md以上 -->
  <div class="d-none d-md-block">
    {{ content.text }}
  </div>
  ...

どんぶラッコ

d-*** で displayの CSSを指定できるんだね
d-XX-*** の XX部分にブレイクポイントを指定することで XX以上の画面幅のディスプレイ指定ができるよ！

是非チェックしてみてください！