[Age of Vue] Vue.js 시작하기 - 33. 사용자 입력 폼 만들기

npm i axios

---

App.vue

 

<template>
<!--
  <form action="">
-->
<form v-on:submit.prevent="submitForm">
  <div>
    <!-- for : 어떤 태그를 위한(for) 레이블인지 정의 -->
      <label for="username">id :</label>
      <!-- input-v-model => two way data binding 
      v-model로 인해 하단의 data username과 매핑되어짐 -->
      <input id="username" type="text" v-model="username">
  </div>
  <div>
      <label for="password">pw :</label>
      <!-- input-v-model => two way data binding 
      v-model로 인해 하단의 data password 매핑되어짐 -->
      <input id="password" type="password" v-model="password">
  </div>
  <!-- form 단위 submit -->
  <button type="submit">login</button>
</form>    
</template>

<script>
import axios from 'axios';

export default {
  //보통 컴포넌트 간 데이터가 공유되지 않도록
  //바로 객체를 쓰지 않고, function을 통해 새 객체를 return해주는 방식으로 쓰여짐
  data : function() {
    return {
      username : '',
      password : '',
    }
  },
  methods : {
    submitForm : function() {
      //event.preventDefault(); submit시, 새로고침을 막는 기능(바닐라js)
      //vue는 form에 .prevent 처리 해주면 된다.
      console.log(this.username, this.password);

      var url = 'https://jsonplaceholder.typicode.com/users';
      var data = {
        username : this.username,
        password : this.password
      }
      //http 통신 방식 + post 방식
      axios.post(url, data)
      .then(function(response) {
        console.log(response);
      })
      .catch(function(error) {
        console.log(error)
      });
    }
  }
}
</script>

<style>

</style>

 

결과(response)