Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar bagaimana cara menampilkan data di Vue Js dari Restful API yang sudah kita buat sebelumnya menggunakan CodeIgniter. Langsung saja kita mulai.
Langkah 1 - Component Index Post
Sekarang kita akan menambahkan beberapa kode di dalam component Index Post, silahkan teman-teman buka file src/components/posts/Index.vue dan kemudian 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">
POSTS
</div>
<div class="card-body">
<router-link :class="['btn btn-md btn-success mb-2']" to="/create">TAMBAH POST</router-link>
<hr>
<div class="table-responsive mt-2">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>TITLE</th>
<th>KONTEN</th>
<th>AKSI</th>
</tr>
</thead>
<tbody>
<tr v-for="(post, index) in posts" :key="post.id">
<td>{{ post.title }}</td>
<td>{{ post.content }}</td>
<td class="text-center">
<router-link :to="{name: 'edit', params: { id: post.id }}" class="btn btn-sm btn-primary mr-2">EDIT</router-link>
<button @click.prevent="PostDelete(post.id, index)" class="btn btn-sm btn-danger">HAPUS</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
posts: []
}
},
created() {
axios.get('http://localhost:8080/api/post').then(response => {
this.posts = response.data.data;
});
}
}
</script>
Di atas di dalam data kita me-return sebuah post dengan nilai array kosong, kemudian pada function created kita memanggil Rest API dari CodeIgniter dengan method GET dan hasil dari response tersebut di assign ke dalam data post array.
data() {
return {
posts: [] //post array
}
}
created() {
axios.get('http://localhost:8080/api/post').then(response => {
this.posts = response.data.data; //assign response to data post array
});
}
Kemudian setelah data berhasil di assign ke dalama data post array, selanjutnya di dalam template kita melakukan sebuah perulangan data dengan directive v-for, kurang lebih seperti berikut ini :
<tr v-for="(post, index) in posts" :key="post.id">
<td>{{ post.title }}</td>
<td>{{ post.content }}</td>
<td class="text-center">
<router-link :to="{name: 'edit', params: { id: post.id }}" class="btn btn-sm btn-primary mr-2">EDIT</router-link>
<button @click.prevent="PostDelete(post.id, index)" class="btn btn-sm btn-danger">HAPUS</button>
</td>
</tr>
Di atas di dalam perulangan kita juga membuat 2 button yaitu untuk edit data dan hapus data, untuk edit data sendiri kita memanggil router-link dan memanggil nama router kita yang sebelumnya sudah kita buat yaitu edit dan kita berikan juga parameter ID dari post.
<router-link :to="{name: 'edit', params: { id: post.id }}" class="btn btn-sm btn-primary mr-2">EDIT</router-link>
Kemudian untuk tombol hapus kita menggunakan directive @click untuk memanggil function dengan nama PostDelete dan di dalamnya kita juga memparsing ID dari data post, untuk function ini akan kita bahas di tutorial selanjutnya.
<button @click.prevent="PostDelete(post.id, index)" class="btn btn-sm btn-danger">HAPUS</button>
Langkah 2 - Menjalankan Project Vue Js
Sekarang kita bisa mencoba menjalankan project Vue Js kita, silahkan jalankan perintah berikut ini jika teman-teman belum menjalankan servernya.
npm run serve
Jika berhasil maka kurang lebih tampilannya seperti berikut ini :
Sampai disini pembahasan tentang bagaimana cara menampilkan cara menampilkan data dari Restful API di Vue JS dari CodeIgniter.
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