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


Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com

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


Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami

KOMENTAR