Vueと共通

【Nuxt.js】Modal実践編:QueryでModalを管理する②

前置き

前回の続きです!
1つのcomponentsで
複数のModalを表示させましょう✨


Step5: 中身をcomponents分けする

Modalの外側と内側で
componentsを切り分けていきましょう。
queryによって切り替えているpタグを
organismsに移動させます🎈🧸
propsを使わなくて済むので
本当にただ移動させるだけです、楽ちん♪

directory

components/
--| organisms/
----| modals/
-----| ModalContainer.vue
--| templates/
----| modals/
-----| ModalRoute.vue

layouts/
--| default.vue

コード

) components


Step6: 中身をFormにする

ついでにformを作りましょう🌟
password入力のinputも作ると
inputをmoleculesで作る必要が出てくるので
一旦イメージだけできればOKです🧸🍯

コード

) components

@click="$emit('submit', form)"
inputに入力する値formを$emitで渡します。

) components

@submit
$emitでつけたイベント名

// eslint-disable-line
consoleなど特定の行に書かないと
ESLintでエラーになります。
https://qiita.com/nju33/items/2d0cfea4fffbfdbff87a


Step7: Formを分ける

今はformが2種類ですが
もし増えたら管理が面倒なので
分けてしまいましょう💡

分けたら意味ないのでは?

安心してください😌
componentタグを使えば良いのです✨

ディレクトリ は
modalsというファイルを作り
ModalContainerのform2つを
それぞれに分けましょう。

directory: before

components/
--| organisms/
----| modals/
-----| ModalContainer.vue
--| templates/
----| modals/
-----| ModalRoute.vue

layouts/
--| default.vue

directory: after

components/
--| templates/
----| modals/
-----| ModalRoute.vue

modals/
--| login.vue
--| register.vue

layouts/
--| default.vue

コード

) file

formのregister部分を除きましょう🧹
$emitのイベント名を分かりやすく
submitLoginに変更しましょう!

) file

変更部分はlogin.vueと同じです

) components

解説

component :is="$route.query.modal"

:isでcomponentを呼び出します!
コンポーネントの登録が必要なので
中身をそれぞれimportしましょう📩

それぞれを1つのコンポーネントとみなし
queryで切り替えましょう🍒

@submitLogin="submit($event)"

$emitのイベント名を変えたので
どちらも書きましょう✍️

($event)は省略可能

-Vueと共通
-,

© 2020 aLiz Nuxt