[Vue] 더보기 버튼 기능 구현하기 (axios로 ajax 요청)

 ajax란?

 

GET 또는 POST 요청하면 브라우저가 새로고침하게 된다. ajax를 쓰면 새로고침 없이도 요청이 가능하다.

 

 axios 설치

 

axios 라이브러리를 쓰든가 기본 fetch 함수를 쓰면 된다. fetch API는 브라우저 비교적 최신 기능이지만 호환성 문제때문에 axios를 이용한다. <script>에서 axios를 import 해온 뒤, axios.get(), axios.post()식으로 사용하면 된다.

npm install axios
yarn add axios

 

 더보기 버튼 기능

 

만약 'https://데이터있는사이트'에 /more0.json, /more1.json... 식으로 데이터가 있다고 가정하자.

 

더보기 버튼을 누르면 axios로 json파일을 get해와서 .then 성공한다면 result의 data를

instaData 데이터안에 push해서 추가해주면 데이터가 추가되어 화면에 출력된다.

 

먼저, <script>에서 methods에 more()이라는 함수를 등록한 뒤 더보기 버튼에 @click="more"로 함수를 넣어준다.

 

그리고 data()에서 morePost를 기본값을 0으로 준 뒤 클릭할 때마다 1씩 추가되어 axios.get으로 more0, more1를 불러와서 push 추가시킨다.

<template>
  <Container :instaData="instaData" />
  <button @click="more">더보기</button>
</template>

<script>
import Container from './components/Container.vue';
import data from './assets/data';
import axios from 'axios';

export default {
  name: 'App',
  data(){
    return {
      instaData : data,
      morePost : 0,
    }
  },
  components: {
    Container,
  },
  methods: {
    more(){
      axios.get(`https://데이터있는사이트/more${this.morePost}.json`)
      .then(result=>{
        this.instaData.push(result.data);
        this.morePost++;
      })
    }
  },
}
</script>