Tutorial Vue JS & Restful API Lumen #6 : Menampilkan Data di Vue JS - Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar bagaimana cara menampilkan data dari Restful API yang sudah kita buat di Lumen sebelumnya.
Langkah 1 - Proses Menampilkan Data
Sekarang kita akan coba menampilkan data dari API yang sebelumnya kita sudah buat, silahkan teman-teman buka file src/components/posts/Index.vue dan ubah kode menjadi 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 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)" 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:8000/posts').then(response => {
this.posts = response.data.data;
});
}
}
</script>
Bisa teman-teman lihat, disini kita mengambil data API dari http://localhost:8000/posts kemudian data tersebut kita parsingkan ke data posts.
Kurang lebih di bagian ini :
<script>
import axios from 'axios'
export default {
data() {
return {
posts: []
}
},
created() {
axios.get('http://localhost:8000/posts').then(response => {
this.posts = response.data.data;
});
}
}
</script>
Setelah data berhasil terambil, di dalam template HTML kita tinggal melakukan perulangan menggunakan direktif v-for. Kurang lebih kodenya seperti ini :
<tr v-for="post 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)" class="btn btn-sm btn-danger">HAPUS</button>
</td>
</tr>
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 menampilkan cara menampilkan data dari Restful API di Vue JS dari Lumen.
Jika ada pertanyaan silahkan teman-teman bisa bertanya melalui kolom komentar dibawah.
Terima Kasih