250x250
Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

진스

카카오 Rest api 이용해보기 본문

Vue

카카오 Rest api 이용해보기

입방정 2021. 5. 1. 19:27
728x90

api/index.js 

//index.js
 
function kakaoFetch(keyword) {
  return axios.create({
    baseURL: "https://dapi.kakao.com/v3/search/book?target=title",
    headers: {
      Authorization: " KakaoAK 나의REST API키",
    },
   params: { query: keyword},
  });
}
 
export { kakaoFetch };
 cs

작업할 vue 내에

//KakaoList.vue
 
<template>
  <div>
    <h2>카카오</h2>
    <form @submit.prevent="searchData">
      <input type="text" v-model="text" />
      <button type="submit">검색</button>
    </form>    
  </div>
</template>
 
<script>
import { kakaoFetch } from "@/api";
// import axios from "axios";
export default {
  data() {
    return {
      text: "",
    };
  },
  methods: {
    async searchData() {
      try {
        const inskaka = kakaoFetch(this.text);
        const res = await inskaka.get();
        console.log(res);
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>
 
 
 
 
cs
728x90

'Vue' 카테고리의 다른 글

slot을 이용한 modal(모달) 사용 feat) transition  (0) 2021.05.04
vue에서 background-image 적용하기  (1) 2021.05.03
vuex 새로고침시 상태 초기화 방지  (0) 2021.04.30
vue-cookies 사용법  (0) 2021.04.30
vue slot 사용법  (0) 2021.04.30
'Vue' Related Articles more
Comments