アプリ サイト

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

前置き

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

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

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

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

Let's try!


ディレクトリ

directory

components/
--| atom/
----| icons/
------| IconUser.vue
--| molecule/
----| items/
------| ItemUserIconName.vue

pages/
--| user.vue

アトミックデザインに基づき作成します🌟
atomはアイコン部分。
他のmoleculeにも使い回す前提です。
moleculeはアイコンとユーザーの名前を追加したものです。

アトミックデザイン

要素の大きさごとにファイルを分けます🙋‍♀️
コンポーネントがどこにあるのか
分かりやすくなります💕
大きさの分類はここが参考になります!
Atomic Designとは


atom

構成

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

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

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

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


ticktack…


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

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


解説

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

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

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


コード

) components


molecule

構成

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

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

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


ticktack…


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

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


解説

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


コード

) components


pages

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

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


ticktack…


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

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


コード

) pages


まとめ

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

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

-アプリ, サイト
-,

© 2020 aLiz Nuxt