Vue + Vue Router + Vuex +Laravel 写真共有アプリ作成 (5)
勉強記録
Vue + Vue Router + Vuex +Laravelで写真共有アプリを作るチュートリアルを行い、
一通り完成したので、自分の復習もかねてまとめます!
参考サイトのチュートリアルの記事が全16記事でしたので、それに合わせてまとめていきます♪
www.hypertextcandy.com
認証ページ
ヘッダーとフッター
ログイン画面へのリンクを配置するヘッダーとフッターを追加する。
ヘッダーコンポーネント
RouterLinkはRouterViewと同様に、Vue Routerから提供されているコンポーネント。
役割はアンカーリンクとほぼ同じだが、通常の画面遷移が発生しない。
(アンカーリンクとは、ページ遷移するためのジャンプリンクに使用する)
RouterLinkで描画したリンクをクリック フロントエンドでの画面遷移が発生する(Vue Routerによるコンポーネントの切り替わり)。
Vue Routerの管理下にあるページに遷移するときにはこのRouterLinkを使う。
App.vue
作ったヘッダー(Navbar.vue)とフッター(Footer.vue)をルートコンポーネントであるApp.vueで使用
それぞれimportして、export defaultによってexportする。
(export defaultは、そのファイルのデフォルトとして、後ろに続くものをexportするという意味)
タブ機能の実装
ログインフォームと会員登録フォームを切り替えるタブを作成する。
ページコンポーネントであるLogin.vueを編集
@click でtabの値が変わるようになっている(Loginなら1、Registerなら2)
クリックするとデータ変数であるtabの値が切り替わる。
このtabの値によって表示するコンテンツをわける。
切り替わるコンテンツ
tabの値によって表示されるコンテンツを変えたい。
v-showを使うと、tabの値によって表示される要素を変えることができる
<ul class="tab"> <!-- 中略 --> </ul> <div class="panel" v-show="tab === 1">Login Form</div> <div class="panel" v-show="tab === 2">Register Form</div>
どっちが選択されているのか、タブの色をかえる
それぞれにクリックしたときにタブの文字が黒くなるよう設定。(色が変わることで、どっちのタブを押したのかわかりやすくなる)
フォームを実装する
Login Form、Register Formと記載していた部分に、それぞれフォームを追記していく。
ログインフォーム
フォームUIを追加したら、フォームの入力値をスクリプトの中で参照するためにv-modelをつかって入力値とデータ変数を紐づける。
まずLogin.vueのdataメソッドの返却値オブジェクトに、loginformを足す(ログインだから、emailとpassword)
export default { data () { return { tab: 1, loginForm: { email: '', password: '' }, } } }
フォームのinput要素にv-modelを追加してデータ変数を紐づける
<input type="text" class="form__item" id="login-email" v-model="loginForm.email"> <input type="password" class="form__item" id="login-password" v-model="loginForm.password">
送信メソッド
実際の送信は後の章で。とりあえずログ出力を行う。
loginメソッドを追加して、ログが出力されるようにする。
form要素でsubmitが押されたときにLoginメソッドが走るように設定する。
<form class="form" @submit.prevent="login">
@submit.preventの.preventはイベント修飾子event.preventDefault() を呼び出すのと同じ効果がある。
これでデフォルトのフォーム送信の挙動をキャンセルし、ページリロードを制御できる。
会員登録フォーム
ログインフォームと同じパターンなので省略。