Kita telah membuat halaman AllPosts.vue untuk menampilkan semua postingan, dan kita tampilkan dalam bentuk table.
Pada table tersebut jika dilihat pada table terdapat 2 button yaitu edit dan delete. Kita akan kerjakan button tersebut sesuai fungsinya, dan dipart kita akan kerjakan terlebih dahulu untuk button delete.
Button Delete
Dari 2 button tersebut kita akan kerjakan terlebih dahulu untuk button delete, dimana fungsinya untuk menghapus pos dan akan menghapus pos sesuai dengan id'nya.Langkah pertama mari kita mulai dengan membuka PostController.php dan kita buat fungsi pada method destroy.
//PostController.php
public function destroy($id)
{
$post = Post::find($id);
Storage::delete($post->image);
$post->delete();
return response()->json($post);
}
Setelah dari PostController.php, kita buka komponen AllPosts.vue.Pada komponen AllPosts.vue kita akan buat event pada button delete, dan method nya untuk mengirim permintaan penghapusan data.
Pada button delete kita tambahkan direktif v-on beserta nama method yang kita gunakan.
<button class="btn btn-danger" type="button" v-on:click="deletePost(post.id)">Delete</button>Alternatif lain kita juga bisa gunakan @click.
//AllPosts.vue <button type="button" @click="deletePost(post.id)" class="btn btn-danger">Delete</button>Letak button di dalam direktif v-for posts dan kita ambil id dari setiap pos pada method deletePost sebagai parameter.
Kemudian kita buat method pada properti methods.
...
deletePost(id) {
axios.delete("/api/posts/" + id)
.then(response => {
this.getPosts();
console.log('deleted!');
});
}
...
Sampai tahap diatas kita sudah dapat menghapus sesuai pos yang dipilih.
Selanjutnya kita akan membuat conditional rendering untuk response pesan setelah pos berhasil terhapus.Pertama kita buat elemen span dengan direktif v-if dan isi pesan.
//AllPosts.vue ... <div class="admin-page-title">All Posts</div> <span v-if="successful" class="badge badge-danger"><h4>deleted!</h4><p>(Pos berhasil dihapus.)</p></span> <div class="h_wrap"> ...Buat juga cssnya:
//AllPosts.vue
<style scoped>
tbody img{
width: 200px;
height: 200px;
}
.table-bordered{
background-color: #ffffff;
}
.badge-success {
color: #fff;
background-color: #28a745;
width: 100%;
text-align: left;
margin-bottom: 10px;
border-radius: 0;
padding: 6px 7px;
}
.badge-success p{
margin-bottom: 6px;
}
</style>
Kemudian kita tambahkan data properti.data:function() {
return {
posts: [],
successful: false,
}
},
Saat tidak ada permintaan, kita kondisikan pesan untuk tidak ditampilkan dengan membuat statmen false pada properti successful.Apabila ada permintaan untuk dieksekusi, kita buat respon untuk menampilkan pesan dengan merubah statmen menjadi true.
...
deletePost(id) {
axios.delete("/api/posts/" + id)
.then(response => {
this.getPosts();
this.successful = true;
console.log('deleted!');
});
}
...
Jika dilihat hasilnya akan seperti gambar dibawah ini:
Kita akan lanjutkan untuk mengerjakan button edit dan kita kerjakan di part selanjutnya.