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

目的(purpose)

nuxtで複数の画像を画面に表示したい!!
そして各画像に説明文なりタイトルなりのデータも含めたい!!
今回行うのがnuxtのdataに画像とその他情報を配列形式で入れ、画面に表示するというのをやってみます。

開発環境(Development environment)

ディレクトリ構成(Directory structure)


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

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

Vuetifyをインストール(Install Vuetify)

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

vuetifyjs.com


npm install @nuxtjs/vuetify -D

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

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

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

実装(Implementation)

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></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></v-divider>
        {{ item.message }}
      </v-expansion-panel-content>
    </v-expansion-panel>
  </v-expansion-panels>

  • 1: エクスパンションパネルは画面の垂直方向のスペースをコンパクトにまとめ、かつ大量の情報を収められるのでガンガン使っていきましょう。
  • 2: ヘッダー部分を表示します。

    f:id:fetchkun:20200528210356p:plain

  • 3: アイコンを表示するためのタグです。
    v-avatarタグを使うだけで丸く良い感じに収めてくれます。
  • 4: 下画像の緑色の部分にテキストを表示するためのタグです。
    この部分を閉じたり、開いたりすることがこのコードだけで実現できます。

    f:id:fetchkun:20200528210412p:plain

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タグ内で複数個表示できるようになります。

最後に(Finally)

これでassetsフォルダ内の画像を読み込みアイコン化して画面に表示することができました。
また、画像とともに名前やメッセージ等のデータもまとめて処理をすることができ、 これらのデータが複数あっても簡単に処理することができました。
あまり説明する箇所が無かったので簡易的になりましたが参考になったでしょうか。
ここまで読んでくれてありがとう!
また、他にもnuxt, vue等に関する記事を書いているので是非読んでください。