小村のポートフォリオサイト開発（５） トップページ（左）について

• こんばんは、小村だよ！

• ポートフォリオ作成における現時点までの苦労した点を記録するよ！

• 今回はトップページの左側について書いていきまふ

• サイト：Little Village

• 下図が記事作成時点でのTopページになるよ！よろしくね！

目次

1. index.vueについて
2. BlogCard.vueについて
3. テストデータの作成について
4. v-forについて
5. サムネイル画像の表示について 1.文字色の指定について

記録

index.vueについて

• Nuxt.jsでは最初アクセスしたときpages配下のindex.vueを見に行くよ

• Index.vueでは今のところコンポーネントを呼ぶだけで超シンプル

• 左側のブログ表示部、右側のカレンダー部、コンテンツ部で分けてます

• API連携が始まるともっとにぎやかになるかもしれない？

<template>
  <v-row>
    <v-col cols="9"><BlogCard /> </v-col>
    <v-col cols="3">
      <BlogCalendar />
      <BlogCategory />
    </v-col>
  </v-row>
</template>

<script>
import BlogCard from '../components/BlogCard.vue'
import BlogCalendar from '../components/BlogCalendar.vue'
import BlogCategory from '../components/BlogCategory.vue'
export default {
  components: {
    BlogCard,
    BlogCalendar,
    BlogCategory,
  },
}
</script>

BlogCard.vueについて

<template>
  <div>
    <v-row v-for="item in items" :key="item.blogId" class="mb-4">
      <v-col>
        <v-card elevation="1" tile>
          <v-row>
            <v-col cols="4" class="pl-10">
              <v-img
                max-height="175"
                max-width="245"
                :src="item.imagePath !== '' ? item.imagePath : NO_IMAGE_PATH"
              />
            </v-col>
            <v-col cols="8">
              <v-card-title class="blogCardTitle--text">
                {{ item.title }}
              </v-card-title>
              <v-card-subtitle class="blogCardSubtitle--text">
                {{ item.datetime }}
                <span class="ml-3">
                  {{ item.category }}
                </span>
              </v-card-subtitle>
              <v-card-text class="blogCardText--text ml-3 pr-10 caption">
                {{ item.text }}
              </v-card-text>
            </v-col>
          </v-row>
        </v-card>
      </v-col>
    </v-row>
    <v-pagination
      v-model="page"
      :length="15"
      :total-visible="7"
      color="blogPagenation"
      next-icon="navigate_next"
      prev-icon="navigate_before"
    ></v-pagination>
  </div>
</template>
<script>
import cloneDeep from 'lodash/cloneDeep'
import Mixin from '../plugins/mixin'

export default {
  mixins: [Mixin],
  data() {
    return {
      NO_IMAGE_PATH: '/images/no_image_white.png',
      ITEM_SAMPLE: {
        imagePath: '',
        title: '１２３４５６７８９十１２３４５６７８二十１２３４５',
        datetime: 'YYYY/MM/DD HH:mm:ss',
        category: '〈１２３４５６７８９十〉',
        text: '１２３４５６７８９十１２３４５６７８二十１２３４５６７８三十１２３４５６７８四十１２３４５６７８五十１２３４５６７８六十１２３４５６７８七十１２３４５６７８八十１２３４５６７８九十１２３４５６７８９百１２３４５６７８百十１２３４５６７百二十１２３４５６７百三十１２３４５６７百四十',
      },
      items: [],
      page: 1,
    }
  },
  created() {
    this.items = []
    for (let i = 0; i < 3; i++) {
      const item = cloneDeep(this.ITEM_SAMPLE)
      item.blogId = i
      this.items.push(item)
    }
  },
}
</script>

• API連携は現在しておらず、仮のデータをItemsに詰め込んでいったん表示しています

• 悩んだところを書いていくよ！

テストデータの作成について

• 今回の仮データ（ITEM_SAMPLEをItemsに追加）を作る場合、DeepCopyが必要

• DeepCopyでなく=で入れた場合、このソースだとblogIdがすべて2になる

  • DeepCopyとはなんぞや？という話はしません。わからなければ調べてね

• そこで有用なのがlodash。CloneDeepとか色々つかえる便利なやつ

• Nuxt.jsでVuetifyを使用している場合、最初からインストールされてるよ！

v-forについて

• 左側の画面は、v-cardを定義して、それをブログの件数分回して作成してます

• それを実現するのがv-for

• keyが必要なのが一般的なfor文と違うところ

• keyは一意でないといけないし、変化してもいけない

  • 参考サイトを探すとindexをkeyに設定するものがあるが、よくない例

• そのあたりが理解できればめちゃんこ便利な子なので使いこなしますともさ

サムネイル画像の表示について

• サムネイルはブログの記事に応じて画像が変化します

• また、ブログの記事によっては画像がないときもある

• そんな感じで、v-forで回しつつも動的に画像を変更したいとき、:srcを定義します

• 頭の:はv-bindを省略したもので、data等を用いて動的に変更できます

• このv-bindを用いて画像を動的に表示させるときは、書き方に注意が必要らしい

  • 参考：【Vue】v-bindで画像が表示されない時の対処法。computedで処理したプロパティで画像を表示する

• 私は普通にいけた。直ったのかな？ひとまず普通に書くことにする

文字色の指定について

• nuxt.config.jsに定義した色 + --textをクラスに書くと変更される

• これに気づかず２時間ほど溶かした。ぐぬぬ。

おわりに

• 思ったより量が多くなったので右側は次の記事にわけまーーーす！

• じゃあまったね～～～ちゃお！