Http Request 라이브러리 Axios 설치
// axois
npm i axois
component 폴더에 http 폴더 생성
src/component/http/TodoList.vue
TodoList.vue
<template>
<div>
<h2>Todo List</h2>
<button @click="getTodoList">Request Todo</button>
<ul>
<li v-for="todo in todoList" :key="todo.id">{{ todo.title }}</li>
</ul>
<div>
<label for="todo">할일</label>
<input type="text" v-model="todoItem.title" />
<button @click="createtodo">전송</button>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "todo",
data() {
return {
todoList: [],
todoItem: {
title: "",
completed: false,
},
};
},
methods: {
createtodo() {
const url = "https://jsonplaceholder.typicode.com/todos";
axios.post(url, this.todoItem).then(function (res) {
//console.log("성공");
console.log(res);
//self.todoList = res.data;
});
},
getTodoList() {
let self = this;
const url = "https://jsonplaceholder.typicode.com/todos";
axios.get(url).then(function (res) {
//console.log("성공");
//console.log(res);
self.todoList = res.data;
});
},
},
};
</script>
<style></style>
app.vue
<template>
<div>
<!-- HTTP Request -->
<h1>Hello Vue!!</h1>
<TodoList />
</div>
</template>
<script>
import TodoList from "./components/http/TodoList.vue";
export default {
name: "App",
components: {
TodoList,
},
provide() {
return {};
},
data() {
return {
username: "bada",
};
},
methods: {},
directives: {},
computed: {},
watch: {},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>