Tutorial Vue JS & Restful API Lumen #6 : Menampilkan Data di Vue JS

• Langkah 1 - Proses Menampilkan Data
• Langkah 2 - Mencoba Menjalankan Aplikasi

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