[장기효(캡틴판교) - Vue.js 시작하기] 10. 간단한 로그인 폼

출처 : 인프런의 장기효(캡틴판교)님의 강좌 / Vue.js 시작하기 - Age of Vue.js

 

10. 간단한 로그인 폼

 

- vue CLI 설치후 프로젝트를 만들고 App.vue 파일 내용을 지우고 작성

 

App.vue 

<template>
  <form v-on:submit.prevent="submitForm">
    <div>
      <label for="username">id: </label>
      <input id="username" type="text" v-model="username">
    </div>
    <div>
      <label for="password">pw: </label>
      <input id="password" type="password" v-model="password">
    </div>
    <button type="submit">login</button>
  </form>
</template>


<script>
import axios from 'axios'; 
export default {
  data: function(){
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    submitForm: function(/*event*/){
      //event.preventDefault(); //Form 클릭시 새로고침 방지 JS 코드
      //<form v-on:submit.prevent="submitForm"> 에서 .prevent로 대체
      console.log(this.username, this.password);
      let url = "https://jsonplaceholder.typicode.com/users";
      let data = {
        username: this.username,
        password: this.password
      }
      axios.post(url, data)
        .then(function(response){
          console.log(response)
        })
        .catch(function(error){
          console.log(error);
        })
    }
  }
}
</script>

<style>

</style>