v-model, v-on:submit 및 axios

<template>
  <div>
    <label for="id">ID:</label>
    <input id="id" type="text" v-model="id">
    <label for="pw">PW:</label>
    <input id="pw" type="text" v-model="pw">
    <button>로그인</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        id: '',
        pw: ''
      }
    },
  }
</script>

<style scoped>

</style>

위처럼 인풋에 v-model로 data와 연결해주면 인풋에 입력할 때마다 data가 변경된다.

 

이제 axios를 다운로드 하자

https://axios-http.com/kr/docs/intro

시작하기 | Axios Docs

 

$ npm install axios

 

설치에는 npm말고도 다양한 방법이 있다. 콘솔창에 넣으면 package.json dependency에서 확인이 가능하다.

 

추가로 이번에 로그인을 위해 가짜 api를 쓸 생각이다.

 

https://jsonplaceholder.typicode.com/

JSONPlaceholder - Free Fake REST API

 

 

<template>
  <form action="" @submit.prevent="login">
      <div>
      <label for="id">ID:</label>
      <input id="id" type="text" v-model="id">
      <label for="pw">PW:</label>
      <input id="pw" type="text" v-model="pw">
      <button type="submit">로그인</button>
    </div>
  </form>
</template>

<script>
  import axios from 'axios'

  export default {
    data() {
      return {
        id: '',
        pw: ''
      }
    },
    methods : {
      login() {
        var data1 = {
          id: this.id,
          pw: this.pw
        }
        axios.post('https://jsonplaceholder.typicode.com/users', data1)
          .then(res => {
            console.log(res);
          })
      }
    }
  }
</script>

<style scoped>

</style>

 

 

1) form에 v-on의 축약어 @submit을 사용하며 .prevent는 event.preventDefault();를 뜻한다.

2) axios는 api 통신을 위한 라이브러리이며 url, data 방식으로 이용된다. then을 이용해서 결과 값을 받을 수 있음