【Nuxt.js】Nuxt実践編：ユーザーアイコン表示の切り替えをしよう

前置き

今回は簡単な実践編です😉💕
作るものはこちら！

マイページのあるサイトで
⬆️ユーザーアイコンの初期状態と
⬇️画像を設定した時の
表示の切り替えをやってみましょう💃🎶

コンポーネント間のやりとりや
演算子の復習になるのでぜひチャレンジしてください🔥💪

今回のような簡単な実践編も
今後増やしていこうと思ってます💕

Let's try!

ディレクトリ

atom

構成

IconUser.vueを作成しましょう🙋‍♀️
初期アイコンと、
アイコンが設定された場合の
表示を切り替えます。
アイコン画像は親で設定します。

背景は縦横64px
アイコンは縦横24px

アイコンはiconmonstrのsvgを使用しています🌟
https://iconmonstr.com/user-5-svg/

それではやってみましょう！！！

ticktack…

まずは切り替えをするので
v-ifとv-elseが使えますね…
親で画像を設定するのでpropsをstringで渡します。
stringを真偽値にしてv-ifとv-elseにしたい…

それではコードを見てみましょう✨👀

解説

v-if="!!image"
v-ifは真偽値判定ですが
propsのimageはstringのため、
!で一度falseにしてから
また!でtrueにしています💡

二重否定の演算子ですね！
https://senews.jp/bikkuri-2/

これでユーザーの指定画像が
trueの時に表示されるようになります❣️😄

コード

) components

<template>
  <div class="icon icon-user">
    <img
      v-if="!!image"
      :src="image"
      class="image"
    >
    <svg
      v-else
      class="icon"
      xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
    >
    <path d="M19 7.001c0 3.865-3.134 7-7 7s-7-3.135-7-7c0-3.867 3.134-7.001 7-7.001s7 3.134 7 7.001zm-1.598 7.18c-1.506 1.137-3.374 1.82-5.402 1.82-2.03 0-3.899-.685-5.407-1.822-4.072 1.793-6.593 7.376-6.593 9.821h24c0-2.423-2.6-8.006-6.598-9.819z"/>
    </svg>
  </div>
</template>

<script>
export default {
  props: {
    image: {
      type: String,
      required: false,
    },
  },
}
</script>

<style lang="scss" scoped>
  .icon-user {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: red;
    border-radius: 50%;
    width: 64px;
    min-width: 64px;
    height: 64px;
    overflow: hidden;

    > .image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    > .icon {
      fill: #fff;
      width: 24px;
      height: 24px;
    }
  }
</style>

<img

v-if="!!image"

:src="image"

class="image"

<svg

v-else

class="icon"

xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"

</svg>

</div>

</template>

export default {

props: {

image: {

type: String,

required: false,

}

</script>

.icon-user {

display: flex;

justify-content: center;

align-items: center;

background-color: red;

border-radius: 50%;

width: 64px;

min-width: 64px;

height: 64px;

overflow: hidden;

> .image {

width: 100%;

height: 100%;

object-fit: cover;

}

> .icon {

fill: #fff;

width: 24px;

height: 24px;

}

</style>

molecule

構成

IconUserを取り込み
その横にユーザーの名前を表示させます。
アイコンと同様に名前も親で指定します🌟

アイコンと名前の距離は16pxです。

それではやってみましょう！！！

ticktack…

親から渡したいのはユーザーの画像と名前。
propsを一括りにできそうですね…。

それではコードを見てみましょう✨👀

解説

props user
propsをまとめたいのでuserというオブジェクトにします。
IconUser.vueにはimageという名前を既につけているので
:image="user.image"で
imageをuser.imageに置き換えます🎈🧸

コード

) components

<template>
  <div class="item item-user-icon-name">
    <IconUser
      :image="user.image"
      class="icon-user"
    />
    <p class="name">
      {{ user.name }}
    </p>
  </div>
</template>

<script>
import IconUser from '~/components/atom/icons/IconUser.vue'

export default {
  components: {
    IconUser,
  },
  props: {
    user: {
      type: Object,
      required: true,
    },
  },
}
</script>

<style lang="scss" scoped>
  .item-user-icon-name {
    display: flex;
    align-items: center;

    > .icon-user {
      margin-right: 16px;
    }

    > .name {
      font-size: 24px;
      font-weight: 600;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
</style>

<IconUser

:image="user.image"

class="icon-user"

</p>

</div>

</template>

import IconUser from '~/components/atom/icons/IconUser.vue'

export default {

components: {

IconUser,

props: {

user: {

type: Object,

required: true,

}

</script>

.item-user-icon-name {

display: flex;

align-items: center;

> .icon-user {

margin-right: 16px;

}

> .name {

font-size: 24px;

font-weight: 600;

flex: 1;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

</style>

pages

土台ができたので、
そのどたいを取り込んで
ユーザー情報を渡すだけですね🎁✨

それではやってみましょう！！！

ticktack…

画像の未設定と設定時で
画像が切り替えられているかの確認もしましょう🌟

それではコードを見てみましょう✨👀

コード

) pages

<template>
  <div class="page">
    <ItemUserIconName
      :user="user"
    />
  </div>
</template>

<script>
import ItemUserIconName from '~/components/molecule/items/ItemUserIconName.vue'

export default {
  components: {
    ItemUserIconName,
  },
  data () {
    return {
      user: {
        // image: '/photo.jpg',
        name: 'Yossy',
      },
    }
  },
}
</script>

<style lang="scss" scoped>
  .page {
    padding: 20px;
  }
</style>

<ItemUserIconName

:user="user"

</div>

</template>

import ItemUserIconName from '~/components/molecule/items/ItemUserIconName.vue'

export default {

components: {

ItemUserIconName,

data () {

return {

user: {

// image: '/photo.jpg',

name: 'Yossy',

}

</script>

.page {

padding: 20px;

}

</style>

まとめ

いかがでしたか？💡
コンポーネント間のpropsのやり取りや
演算子の復習になったかと思います😉🎀

こんな記事がほしい！
などがありましたらコメントお願いします✨🙏