Vue Axios Lanjutan
Pertemuan kali ini kita akan mencoba GET dan POST data API Gorest.co.in
Last updated
Pertemuan kali ini kita akan mencoba GET dan POST data API Gorest.co.in
Last updated
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Axios - Gorest.co.in</title>
<script src="lib/vue.js"></script>
<script src="lib/axios.min.js"></script>
</head>
<body>
<div id="app">
<h1>API Gorest.co.in</h1>
<input v-model="name" placeholder="name">
<input v-model="description" placeholder="description">
<button v-on:click="saveCategory">Simpan</button>
<hr>
<section v-if="errored">
<p>We're sorry, we're not able to retrieve this information at the moment, please try back later</p>
</section>
<section v-else>
<div v-if="loading">Loading...</div>
<div
v-else
v-for="gorest in info">
{{ gorest.name }} <br>
{{ gorest.description }}
<hr>
</div>
</section>
</div>
....
</body>
</html><script>
let vm = new Vue({
el: '#app',
data: function () {
return {
info: null,
loading: true,
errored: false,
name: null,
description: null,
}
},
methods: {
saveCategory: function () {
let _data = {
'name': this.name,
'description': this.description,
'status': true
}
axios
.post('https://gorest.co.in/public-api/categories/', _data, {
headers: {"Content-type": "application/json; charset=UTF-8","Authorization": "Bearer AccessToken"}
})
.then(response => {
this.info = response
console.log(response)
this.getCategory()
})
.catch(error => {
console.log(error)
this.errored = true
})
},
getCategory: function () {
axios
.get('https://gorest.co.in/public-api/categories')
.then(response => {
this.info = response.data.data
})
.catch(error => {
console.log(error)
this.errored = true
})
.finally(() => this.loading = false)
}
},
mounted () {
// panggil method getCategory()
this.getCategory()
}
})
</script>