Page 448 - MDP2022-3

나. Vue.js에서 로그인 기능구현을 위한 코드

<template>
<div class="login">
<h1 style="text-align: center">Welcome To SemiColon</h1>
<form class="loginform">
<p>
<label for="memberIdInput">이메일</label>
<input
type="text"
id="memberIdInput"
class="input_text"
ref="memberIdInput"
v-model.trim="memberEmail"
placeholder="이메일을 입력하세요."
/>
</p>
<p>
<label for="memberPasswordInput">패스워드</label>
<input
type="password"
id="memberPasswordInput"
class="input_text"
ref="memberPasswordInput"
v-model.trim="memberPassword"
placeholder="패스워드를 입력하세요."
/>
</p>
<p class="buttons">
<button @click.prevent="doLogin" class="button blue">로그인</button>
<button @click.prevent="doCancel" class="button">취소</button>
</p>
</form>
<p>{{ errorMessage }}</p>
</div>
</template>
<script>
export default {
name: "userLoginView",
data: function () {
return {
memberEmail: "",
memberPassword: "",
errorMessage: "",
};