Tutorial Vue JS & Restful API Lumen #7 : Input Data di Vue JS - Halo teman-teman semuanya, pada artikel kali ini kita smeua akan belajar bagaimana cara memasukkan data atau input data ke dalam database menggunakan Vue JS dan Restful API yang sebelumnya sudah kita buat di Lumen.
Di artikel sebelumnya, kita sudah berhasil menampilkan data di Vue JS yang di ambil dari restful API dari Lumen. Sekarang kita akan mencoba memasukkan data menggunakan Vue JS.
Langkah 1 - Proses Memasukkan Data
Silahkan teman-teman buka file src/components/posts/Create.vue dan silahkan ubah kodenya menjadi seperti berikut ini :
<template>
<div class="posts">
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-header">
TAMBAH POST
</div>
<div class="card-body">
<form @submit.prevent="PostStore">
<div class="form-group">
<label>TITLE</label>
<input type="text" class="form-control" v-model="post.title"
placeholder="Masukkan Title">
<div v-if="validation.title">
<div class="alert alert-danger mt-1" role="alert">
{{ validation.title[0] }}
</div>
</div>
</div>
<div class="form-group">
<label>KONTEN</label>
<textarea class="form-control" v-model="post.content" rows="5"
placeholder="Masukkan Konten"></textarea>
<div v-if="validation.content">
<div class="alert alert-danger mt-1" role="alert">
{{ validation.content[0] }}
</div>
</div>
</div>
<button type="submit" class="btn btn-md btn-success mr-2">SIMPAN</button>
<button type="reset" class="btn btn-md btn-danger">RESET</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
post: {},
validation: []
}
},
methods: {
PostStore() {
axios.post('http://localhost:8000/posts', this.post)
.then((response) => {
this.$router.push({
name: 'posts'
});
console.log(response.data.data);
}).catch(error => {
this.validation = error.response.data.data;
});
}
}
}
</script>
Bisa teman-teman perhatikan dari kode di atas, disini kita membuat 2 data, yaitu
-
post - variabel ini akan kita gunakan di dalam form untuk membuat directive v-model.
-
validation - kita gunakan untuk menampilkan response error dari server.
Kemudian, untuk proses memasukkan data ke server, teman-teman bisa lihat di dalam methods dan didalamnya kita membuat function PostStore :
PostStore() {
axios.post('http://localhost:8000/posts', this.post)
.then((response) => {
this.$router.push({
name: 'posts'
});
console.log(response.data.data);
}).catch(error => {
this.validation = error.response.data.data;
});
}
Langkah 2 - Mencoba Menjalankan Aplikasi
Sekarang, silahkan teman-teman jalankan project Vue JS dengan cara menjalankan perintah :
npm run serve
Jika berhasil, teman-teman akan melihat kurang lebih tampilannya seperti berikut ini :
Sampai disini pembahasan tentang bagaimana cara memasukkan data dari Restful API di Vue JS dari Lumen.
Jika ada pertanyaan silahkan teman-teman bisa bertanya melalui kolom komentar dibawah.
Terima Kasih