반응형
<template>
<form @submit.prevent="submitForm">
<div>
<label for="username">id: </label>
<input type="text" v-model="username" />
</div>
<div>
<label for="password">pw: </label>
<input type="password" v-model="password" />
</div>
<button type="submit">로그인</button>
<p>{{ logMessage }}</p>
</form>
</template>
<script>
import { loginUser } from '@/api/index';
export default {
data() {
return {
username: '',
password: '',
logMessage: '',
};
},
mounted() {},
methods: {
async submitForm() {
try {
// 비지니스 로직
const userData = {
username: this.username,
password: this.password,
};
const { data } = await loginUser(userData);
console.log(data.user.nickname);
this.logMessage = `${data.user.nickname}님 환영합니다`;
} catch (error) {
// 에러 핸들링할 코드
// console.log(error.response);
this.logMessage = error.response.data;
} finally {
// ininFrom() 함수가 중복될 경우 finally 함수를 이용해서 끝에다 넣으면 된다
this.initFrom();
}
},
initFrom() {
this.username = '';
this.password = '';
},
},
};
</script>
<style lang="scss" scoped></style>
반응형
'vue.js > vue.js 2' 카테고리의 다른 글
115. 에러 메시지 출력 및 에러 피드백 표시 방법 (0) | 2022.11.22 |
---|---|
114. 네트워크 에러 확인 방법과 에러 처리 코드 구현 | async & await 에러 처리 방법 (0) | 2022.10.17 |
112. env 파일과 설정 방법 | vueCLI의 env파일 규칙과 실무 환경 구성 방법 (0) | 2022.10.17 |
111. API 설정 공통화 | axios.create 로 공통설정(URL) 담는 방법 (0) | 2022.10.17 |
110. 회원가입 이후의 동작 구현 (0) | 2022.10.17 |