废话不多说 ,直接上代码
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue fetch</title>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Fetch请求</h1>
<div id="vue-app">
<!-- post 请求 -->
<form @submit.prevent="submit">
<input type="text" v-model="todo.title" />
<input type="checkbox" v-model="todo.completed" />
<input type="submit" value="提交" />
</form>
<ul>
<li v-for="todo in todos">
<h1>{{todo.title}}</h1>
<p v-if="todo.completed">{{todo.completed}}</p>
</li>
</ul>
</div>
<script src="./app.js"></script>
</body>
</html>
app.js
const app = new Vue({
el: "#vue-app",
data() {
return {
todos: [],
todo: {
title: '',
completed: false
}
}
},
mounted() {
// fetch api 请求接口
fetch('http://jsonplaceholder.typicode.com/todos').then(res => {
// console.log(res);
// console.log(res.json);
return res.json();
}).then(todos => {
this.todos = todos
})
},
computed: {},
methods: {
submit() {
// console.log(this.todo);
fetch('http://jsonplaceholder.typicode.com/todos', {
method: 'POST',
body: JSON.stringify(this.todo),
headers: {
"Content-Type": 'application/json'
}
})
.then(res => {
return res.json();
}).then(todo => {
console.log(todo);
this.todos.unshift(todo)
})
}
}
})