Tutorial Vue.js dan Express.js #4 : Menampilkan Data di Vue.js

• Langkah 1 - Menampilkan Data di Vue.js
• Langkah 2 - Uji Coba Menampilkan Data di Vue.js

Halo teman-teman semuanya, di artikel sebelumnya kita sudah belajar bagaimana cara installasi dan konfigurasi Vue Router di dalam project Vue.js, maka sekarang kita akan belajar bagaimana cara menampilkan data di dalam project Vue.js dari Rest API yang sudah kita buat sebelumnya di dalam Express.js. Dan disini kita akan menggunakan Composition API untuk menampilkan datanya.

CATATAN : pastikan project Express.js sudah dijalankan terlebih dahulu.

Langkah 1 - Menampilkan Data di Vue.js

Sekarang kita akan mengubah kode yang sebelumnya sudah kita tambahkan di dalam view / component. Silahkan buka file src/views/posts/Index.vue, kemudian ubah semua kode-nya menjadi seperti berikut ini :

<template>
    <div class="container mt-custom">
        <div class="row">
            <div class="col-md-12">
                <div class="card border-0 rounded shadow">
                    <div class="card-body">
                        <h4>DATA POST</h4>
                        <hr>
                        <router-link :to="{name: 'posts.create'}" class="btn btn-md btn-success">TAMBAH POST</router-link>

                        <table class="table table-striped table-bordered mt-4">
                            <thead class="thead-dark">
                                <tr>
                                    <th scope="col">TITLE</th>
                                    <th scope="col">CONTENT</th>
                                    <th scope="col">OPTIONS</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(post, index) in posts" :key="index">
                                    <td>{{ post.title }}</td>
                                    <td>{{ post.content }}</td>
                                    <td class="text-center"></td>
                                </tr>
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import { onMounted, ref } from 'vue'

export default {

    setup() {

        //reactive state
        let posts = ref([])

        //mounted
        onMounted(() => {

           //panggil function "getDataPosts" 
           getDataPosts()

        })

        //function "getDataPosts"
        function getDataPosts() {

            //get API from Express Backend
            axios.get('http://localhost:3000/api/posts')
            .then(response => {
              
              //assign state posts with response data
              posts.value = response.data.data

            }).catch(error => {
                console.log(error.response.data)
            })
        }

        //return
        return {
            posts,
            getDataPosts,
        }

    }

}
</script>

Di atas, pertama kita import library axios, ini akan kita gunakan untuk melakukan HTTP request ke server untuk mendapatkan data posts melalui endpoint Rest API.

import axios from 'axios'

Kemudian, kita import hook onMounted dan Reactivity API ref dari Vue.

import { onMounted, ref } from 'vue'

onMounted sama dengan mounted, yaitu salah satu lifecycle hook yang ada di dalam Vue.js, karena kita menggunakan Composition API, maka kita tambahkan on di depannya.

kemudian untuk ref merupakan fitur baru di Vue.js 3 yaitu Reactivity API, dimana digunakan untuk membuat sebuah variable menjadi reaktif, dan ref biasanya digunakan untuk penggunaan data primitif, seperti String, Boolean, Integer dan lain-lain.

kemudian, untuk mendeklarasikan component menggunakan Composition API, kita gunakan function setup, dimana semua kode akan di letakkan di dalam function tersebut.

setup() {

	// ...

}

Dan, di dalam function setup kita buat sebuah state dengan nama posts dan kita set menjadi reactive.

//reactive state
let posts = ref([])

INFORMASI:

Jika menggunakan reactivity API ref di dalam function setup, maka untuk set dan get data menggunakan single objek .value.

Tapi untuk menampilkan di template kita tidak perlu menggunakan .value.

Dan di dalam onMounted kita memanggil function yang bernama getDataPosts.

//mounted
onMounted(() => {

    //panggil function "getDataPosts" 
    getDataPosts()

})

Dan di dalam function getDataPosts kita melakukan HTTP request menggunakan Axios dengan method GET ke dalam endpoint http://localhost:3000/api/posts.

//get API from Express Backend
axios.get('http://localhost:3000/api/posts')

Dan jika proses request berhasil dilakukan, maka akan melakukan assign response data ke dalam state posts.

//assign state posts with response data
posts.value = response.data.data

Setelah itu kita return state kita di atas. Di dalam Composition API semua function dan method harus melakukan return agar dapat di di baca di dalam template.

//return
return {
   posts,
   getDataPosts,
}

Kemudian, untuk menampilkan di template, kita menggunakan perulangan dengan directive v-for.

<tr v-for="(post, index) in posts" :key="index">
    <td>{{ post.title }}</td>
    <td>{{ post.content }}</td>
    <td class="text-center"></td>
</tr>

Langkah 2 - Uji Coba Menampilkan Data di Vue.js

Sekarang kita bisa mencoba menjalankan project-nya, silahkan buka di http://localhost:8080/posts, jika berhasil, maka kita akan mendapatkan tampilan seperti berikut ini :

Di atas kita tidak menampilkan data apapun, karena kita belum memiliki data di dalam database. Di artikel selanjutnya kita akan belajar bagaimana cara membuat proses insert data di dalam Vue.js

Terima Kasih

• Membangun Website CMS Dengan Laravel dan Nuxt.js (SSR) : https://bit.ly/ebook-laravel-nuxt-js
• Membangun Website Toko Online Dengan Laravel, Nuxt.js (SSR + PWA) dan Payment Gateway : https://bit.ly/ebook-laravel-nuxt-js-payment-gateway