사용자 입력 폼 만들기

사용자 입력 폼 만들기

// 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 {
  // 컴포넌트간에 데이터가 공유되지 않도록 function을 이용해서 새 객체를 리턴한다.
  data: function() {
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    submitForm: function(){
      console.log(this.username, this.password)
      // 아래의 url로 데이터를 주고 받을 수 있다.
      var url = 'https://jsonplaceholder.typicode.com/users';
      var data = {
        username: this.username,
        password: this.password
      }
      // 호스트 요청으로 규칙으로 url을 보내고 data를 넘긴다.
     axios.post(url, data)
      // promise 구문으로 확인해보기
      .then(function(response){
        console.log(response)
      })
      .catch(function(error){
        console.log(error)
      })
    }
  }
}
</script>

 

npm i axios

특정 라이브러리(설치한 라이브러리)를 사용할 수 있도록 프로젝트에 다운받는 것을 의미한다.

axios를 사용하기 위해서 import axios from 'axios' 작성