30代専業主婦の独学エンジニア挑戦ブログ

実務未経験の30歳の専業主婦が独学でエンジニアを目指すブログです

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() を呼び出すのと同じ効果がある。
これでデフォルトのフォーム送信の挙動をキャンセルし、ページリロードを制御できる。

会員登録フォーム

ログインフォームと同じパターンなので省略。