nuxtで配列内の画像とデータを画面に表示

Nuxt
Gerd AltmannによるPixabayからの画像

目的

nuxtで複数の画像を画面に表示したい!!

そして各画像に説明文なりタイトルなりのデータも含めたい!!

今回行うのがnuxtのdataに画像とその他情報を配列形式で入れ、画面に表示するというのをやってみます。

※この記事は2020年5月ごろにはてなブログに投稿していた記事と同じです

開発環境

  • OS: Windows10 home 64bit
  • フレームワーク: Nuxt.js (spaモードで今回使用)
  • 言語: javascript

ディレクトリ構成

js_spa/
  ├ assets/
  │   ├ img1.png
  │   └ img2.png
  ├ pages/
  │   └ index.vue
  └ nuxt.config.js

※今回使用するファイルのみ表示しています。

Vuetifyをインストール

手軽に綺麗なデザインを作るためにVuetifyをインストールします。
VuetifyはVueやNuxtへのインストールのやり方がとても分かりやすいです。
公式に日本語で書かれたドキュメントがありますのでそちらを参考にするのも良いかと

npm install @nuxtjs/vuetify -D

上記コマンドでnuxtにVuetifyをインストールできました。
インストール後、nuxt.config.jsに以下を追加。公式通りbuildModulesに追加しましょう

export default {
// ~~~~~~~~~~~~~~~~~省略~~~~~~~~~~~~~~~~~~~~~~~~
  buildModules: [
    '@nuxtjs/vuetify'
  ],
// ~~~~~~~~~~~~~~~~~省略~~~~~~~~~~~~~~~~~~~~~~~
}

これでnuxt内でvuetifyを使ってデザイン作成を楽にすることができます。

実装

<!-- pages/index.vue -->
<template>
  <v-expansion-panels>
    <v-expansion-panel v-for="(item, index) in items" :key="index">
      <v-expansion-panel-header>
        <td>
          <v-avatar>
            <v-img :src="item.image" />
          </v-avatar>
        </td>
        <td>
          {{ item.name }}
        </td>
      </v-expansion-panel-header>
      <v-expansion-panel-content>
        <v-divider />
        {{ item.message }}
      </v-expansion-panel-content>
    </v-expansion-panel>
  </v-expansion-panels>
</template>
<script>
export default {
  data () {
    return {
      items: [
        {
          name: 'fetch',
          message: 'fetchkunのアイコン',
          image: require('@/assets/img1.jpg')
        },
        {
          name: 'illustrator',
          message: '第二アイコン',
          image: require('@/assets/img2.png')
        }
      ]
    }
  }
}
</script>

templatescriptそれぞれの部分を分けて説明します。

template

<v-expansion-panels>  <!-- 1 -->
  <v-expansion-panel v-for="(item, index) in items" :key="index">  <!-- 1 -->
    <v-expansion-panel-header>  <!-- 2 -->
      <td>
        <v-avatar>  <!-- 3 -->
          <v-img :src="item.image" />
        </v-avatar>
      </td>
      <td>
        {{ item.name }}
      </td>
    </v-expansion-panel-header>
    <v-expansion-panel-content>  <!-- 4 -->
      <v-divider />
      {{ item.message }}
    </v-expansion-panel-content>
  </v-expansion-panel>
</v-expansion-panels>
  • 1: エクスパンションパネルは画面の垂直方向のスペースをコンパクトにまとめ、
    かつ大量の情報を収められるのでガンガン使っていきましょう。
  • 2: ヘッダー部分を表示します。
  • 3: アイコンを表示するためのタグです。
    v-avatarタグを使うだけで丸く良い感じに収めてくれます。
  • 4: 下画像の赤色の部分にテキストを表示するためのタグです。
    この部分を閉じたり、開いたりすることがこのコードだけで実現できます。

script

export default {
  data () {
    return {
      items: [
        {
          name: 'fetch',
          message: 'fetchkunのアイコン',
          image: require('@/assets/img1.jpg')  // 5
        },
        {
          name: 'illustrator',
          message: '第二アイコン',
          image: require('@/assets/img2.png')  // 5
        }
      ]
    }
  }
}
  • 5: assetsフォルダ内に用意した画像を読み込んでいます。
    data内でrequireすることで画像を読み込んで画面に表示することができます。
    このコードの書き方をすればデータが複数あったとしても連想配列に入れてtemplateタグ内で複数個表示できるようになります。

最後に

これでassetsフォルダ内の画像を読み込みアイコン化して画面に表示することができました。
また、画像とともに名前やメッセージ等のデータもまとめて処理をすることができ、これらのデータが複数あっても簡単に処理することができました。

あまり説明する箇所が無かったので簡易的になりましたが参考になったでしょうか。

ここまで読んでくれてありがとう!

コメント

タイトルとURLをコピーしました