반응형
회원가입 폼 데이터 바인딩 및 이벤트 연결
- 인풋의 값을 v-model로 데이터 바인딩 시켜서 연결시킴
- (데이터 바인딩 이란 두 데이터 혹은 정보의 소스를 모두 일치시키는 기법이다.)
- 버튼 sumit을 클릭하면 이벤트가 발생되면서 form으로 올라간다.
- form은 @submit="submitForm()"으로 메서드 실행
- 아이디, 비밀번호, 닉네임 입력하고 버튼 누르면 form 태그의 submitFrom메서드가 실행되는 구조
- <form @submit.prevent="submitForm"> prevent를 달게되면 from의 기본구조인 제출하고, 페이지이동하는 새로고침을 막을수 있다.
<template>
<!-- v-on은 @와도 같다. | v-on:submit="" -> @submit=""
prevent은 form의 from의 기본구조인 제출하고 페이지이동하는 새로고침을 막을수 있다. -->
<form @submit.prevent="submitForm">
<div>
<label for="username">id: </label>
<input type="text" name="" id="username" v-model="username" />
</div>
<div>
<label for="password">pw: </label>
<input type="text" name="" id="password" v-model="password" />
</div>
<div>
<label for="nickname">nickname: </label>
<input type="text" name="" id="nickname" v-model="nickname" />
</div>
<button type="submit">회원가입</button>
<p>{{ logMessage }}</p>
</form>
</template>
<script>
import { registerUser } from '@/api/index';
export default {
data() {
return {
// form values
username: '',
password: '',
nickname: '',
//log
logMessage: '',
};
},
mounted() {},
methods: {
async submitForm() {
const userData = {
username: this.username,
password: this.password,
nickname: this.nickname,
};
// const red = await registerUser(userData);
// console.log(res.data);
// res.data 바로 꺼내는 방법
const { data } = await registerUser(userData);
console.log(data.username);
// es6백틱을 이용해서 출력 `(~)
// 자바스크립트 변수를 문자열 안으로 들고 올수 있게됨
this.logMessage = `${data.username}님이 가입되었습니다`;
this.initForm();
},
initForm() {
// form에 데이터 비우기
// 자바스크립트는 타입이 없는 언어이기 때문에 null로 넣어도됨
// 그치만 타입을 넣어주는게 버그 줄이는 길
this.username = '';
this.password = '';
this.nickname = '';
},
},
};
</script>
<style lang="scss" scoped></style>
반응형
'vue.js > vue.js 2' 카테고리의 다른 글
110. 회원가입 이후의 동작 구현 (0) | 2022.10.17 |
---|---|
109. 회원가입 API 요청을 위한 문서 확인 | API 폴더와 회원 가입 API 함수 생성 | 회원가입 API 호출과 주의 사항 | api폴더를 만들어서 axios에 대한 공통 구문을 구조화 (0) | 2022.10.17 |
107. router | mode: 'history' 설정 및 배포할때 주의 사항 (0) | 2022.10.09 |
106. router | 없는 페이지를 접근할 때의 라우터 처리 | path: '*' (0) | 2022.10.09 |
105. router | 초기 진입 페이지 설정 | redirect (0) | 2022.10.09 |