Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar bagaiaman cara membuat edit dan update data di Vue Js dari Restful API yang sudah kita buat dengan CodeIgniter.
Jadi konsepnya nanti kita akan menggunakan 2 endpoint API yang pertama untuk menampilkan data post yang ingin di edit ke dalam form dan kedua untuk mengirimkan data hasil edit ke server dan di masukkan ke dalam database.
Langkah 1 - Component Edit Post
Silahkan teman-teman buka file src/components/posts/Edit.vue dan kemudian ubahkah kode di dalamnya 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 v-if="errors.length">
<div v-for="error in errors" :key="error.index" class="alert alert-danger mt-1" role="alert">
{{ error }}
</div>
</div>
<div class="card">
<div class="card-header">
EDIT POSTS
</div>
<div class="card-body">
<form @submit.prevent="PostUpdate">
<div class="form-group">
<label>TITLE</label>
<input type="text" class="form-control" v-model="post.title"
placeholder="Masukkan Title">
</div>
<div class="form-group">
<label>KONTEN</label>
<textarea class="form-control" v-model="post.content" rows="5"
placeholder="Masukkan Konten"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-md btn-success mr-2">UPDATE</button>
<button type="reset" class="btn btn-md btn-danger">RESET</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
post: {},
errors: []
}
},
created() {
axios.get(`http://localhost:8080/api/post/${this.$route.params.id}`)
.then((response) => {
this.post = response.data.data;
});
},
methods: {
PostUpdate(e) {
if (this.post.title && this.post.content) {
axios.put(`http://localhost:8080/api/post/${this.$route.params.id}`, this.post)
.then((response) => {
this.$router.push({
name: 'posts'
});
console.log(response);
}).catch(error => {
console.log(error.response.data.data);
});
}
this.errors = [];
if (!this.post.title) {
this.errors.push('Masukkan Title Post.');
}
if (!this.post.content) {
this.errors.push('Masukkan Konten Post.');
}
e.preventDefault()
}
}
}
</script>
Di atas sama seperti pada component create post, jadi kita membuat 2 data array yaitu post dan error , untuk array post akan kita isi dengan data hasil response API detail data. Dan array error akan kita isi dengan error message dari hasil pengecekan validation.
data() {
return {
post: {},
errors: []
}
}
Kemudian untuk mendapatkan data yang ingin kita edit kita memanggil sebuah endpoint di dalam function created dan dari hasil responsenya akan di assign ke dalam data array post, kurang lebih seperti berikut ini :
created() {
axios.get(`http://localhost:8080/api/post/${this.$route.params.id}`)
.then((response) => {
this.post = response.data.data; //assign response ke data post array
});
}
Dan untuk update data teman-teman bisa lihat pada form action kita menggunakan directive @submit dan diarahkan ke method yang bernama PostUpdate. Didalam function ini kita juga menggunakan sebuah kondisi jika title dan content ada isinya maka akan dilakukan pengiriman sebuah data menggunakan API dengan method PUT ke server dan menyimpannya ke dalam database. Kemudian akan di arahkan ke halaman dengan nama router posts.
if (this.post.title && this.post.content) {
axios.put(`http://localhost:8080/api/post/${this.$route.params.id}`, this.post)
.then((response) => {
this.$router.push({
name: 'posts'
});
console.log(response);
}).catch(error => {
console.log(error.response.data.data);
});
}
Kemudian jika title dan content tidak ada isinya maka akan mengirimkan message ke dalam array error dengan push, kurang lebih seperti berikut ini :
if (!this.post.title) {
this.errors.push('Masukkan Title Post.');
}
if (!this.post.content) {
this.errors.push('Masukkan Konten Post.');
}
Kemudian untuk menampilkan errornya teman-teman perhatikan pada template, kurang lebih seperti berikut ini :
<div v-if="errors.length">
<div v-for="error in errors" :key="error.index" class="alert alert-danger mt-1" role="alert">
{{ error }}
</div>
</div>
Jadi kita cek dulu apakah array error lenght ada isinya, jika ada maka akan kita lakukan perulangan untuk error tersebut dengan directive v-for.
Langkah 2 - Menjalankan Project Vue Js
Silahkan coba edit data post, jika berhasilurang lebih tampilannya seperti berikut ini :
Sampai disini pembahasan tentang bagaimana cara edit dan update data dari Restful API di Vue JS.
Source Code
CodeIgniter Restful API : https://github.com/SantriKoding-com/CodeIgniter4-Restful-API
Vue Js : https://github.com/SantriKoding-com/Vue-Js-CodeIgniter
Jika ada pertanyaan silahkan teman-teman bisa bertanya melalui kolom komentar dibawah.
Terima Kasih