Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (5) 認証ページ

<template>
  <nav class="navbar">
    <RouterLink class="navbar__brand" to="/">
      Vuesplash
    </RouterLink>
    <div class="navbar__menu">
      <div class="navbar__item">
        <button class="button">
          <i class="icon ion-md-add"></i>
          Submit a photo
        </button>
      </div>
      <span class="navbar__item">
        username
      </span>
      <div class="navbar__item">
        <RouterLink class="button button--link" to="/login">
          Login / Register
        </RouterLink>
      </div>
    </div>
  </nav>
</template>

<template>
  <footer class="footer">
    <button class="button button--link">Logout</button>
    <RouterLink class="button button--link" to="/login">
      Login / Register
    </RouterLink>
  </footer>
</template>

<template>
  <div>
    <header>
      <Navbar />
    </header>
    <main>
      <div class="container">
        <RouterView />
      </div>
    </main>
    <Footer />
  </div>
</template>

<script>
import Navbar from './components/Navbar.vue'
import Footer from './components/Footer.vue'

export default {
  components: {
    Navbar,
    Footer
  }
}
</script>

$ npm run watch

<template>
  <div class="container--small">
    <ul class="tab">
      <li
        class="tab__item"
        @click="tab = 1"
      >Login</li>
      <li
        class="tab__item"
        @click="tab = 2"
      >Register</li>
    </ul>
    {{ tab }}
  </div>
</template>

<script>
export default {
  data () {
    return {
      tab: 1
    }
  }
}
</script>

<ul class="tab">
  <!-- 中略 -->
</ul>
<div class="panel" v-show="tab === 1">Login Form</div>
<div class="panel" v-show="tab === 2">Register Form</div>

<ul class="tab">
  <li
    class="tab__item"
    :class="{'tab__item--active': tab === 1 }"
    @click="tab = 1"
  >Login</li>
  <li
    class="tab__item"
    :class="{'tab__item--active': tab === 2 }"
    @click="tab = 2"
  >Register</li>
</ul>

<div class="panel" v-show="tab === 1">
  <form class="form">
    <label for="login-email">Email</label>
    <input type="text" class="form__item" id="login-email">
    <label for="login-password">Password</label>
    <input type="password" class="form__item" id="login-password">
    <div class="form__button">
      <button type="submit" class="button button--inverse">login</button>
    </div>
  </form>
</div>

export default {
  data () {
    return {
      tab: 1,
      loginForm: {
        email: '',
        password: ''
      },
    }
  }
}

<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">

export default {
  data () {/* 中略 */},
  methods: {
    login () {
      console.log(this.loginForm)
    }
  }
}

<form class="form" @submit.prevent="login">

<div class="panel" v-show="tab === 2">
  <form class="form" @submit.prevent="register">
    <label for="username">Name</label>
    <input type="text" class="form__item" id="username" v-model="registerForm.name">
    <label for="email">Email</label>
    <input type="text" class="form__item" id="email" v-model="registerForm.email">
    <label for="password">Password</label>
    <input type="password" class="form__item" id="password" v-model="registerForm.password">
    <label for="password-confirmation">Password (confirm)</label>
    <input type="password" class="form__item" id="password-confirmation" v-model="registerForm.password_confirmation">
    <div class="form__button">
      <button type="submit" class="button button--inverse">register</button>
    </div>
  </form>
</div>

export default {
  data () {
    return {
      tab: 1,
      loginForm: {/* 中略 */},
      registerForm: {
        name: '',
        email: '',
        password: '',
        password_confirmation: ''
      }
    }
  },
  methods: {
    login () {/* 中略 */},
    register () {
      console.log(this.registerForm)
    }
  }
}