[Vue.js] http 통신하기

VUE.JS 목록

 

axios 설치

http rest api를 호출하는 라이브러리 입니다.

$ yarn add axios

 

Fake Rest API

https://jsonplaceholder.typicode.com/

Rest API 가상 데이터를 제공하는 사이트 입니다.

App.vue

<template>
    <div id="app">
        <Header />
        <AddTodo v-on:add-todo="addTodo" />
        <Todos v-bind:todos="todos" v-on:del-todo="deleteTodo" />
    </div>
</template>

<script>
import Header from './components/layout/Header'
import Todos from './components/Todos'
import AddTodo from './components/AddTodo'
import axios from 'axios'

export default {
    name: "app",
    components: {
        Header,
        Todos,
        AddTodo
    },
    data() {
        return {
            todos: []
        }
    },
    methods: {
        deleteTodo(id) {
            axios.delete(`https://jsonplaceholder.typicode.com/todos/${id}`)
                .then(res => this.todos = this.todos.filter(todo => todo.id !== id))
                .catch(error => console.error(error))
        },
        addTodo(newTodo) {
            const {title, completed} = newTodo

            axios.post('https://jsonplaceholder.typicode.com/todos', {
                title, completed
            })
                .then(res => this.todos = [...this.todos, res.data])
                .catch(error => console.error(error))
        }
    },
    created() {
        axios.get('https://jsonplaceholder.typicode.com/todos?_limit=10')
            .then(res => this.todos = res.data)
            .catch(error => console.error(error))
    }
};
</script>

<style>
* {
    padding:0;
    margin: 0;
}
.btn {
    display: inline-block;
    border: none;
    background: #555;
    color: #fff;
    padding: 7px 20px;
    cursor: pointer;
}
.btn:hover {
    background: #666
}
</style>

 

추가, 삭제도 정상적으로 작동하지만

새로고침 하면 원상복귀 됩니다.

 

VUE.JS 목록