Cara mudah menampilkan data laravel vue dengan Inertia JS

Sebelumnya kita sudah membahas mengenai Request dan implementasi nya menggunakan Inertia Post bagi anda yang belum membacanya silahkan baca disini

Kali ini kita akan mencoba menampilkan data yang sudah kita insert ke database dan kita akan tampilkan pada pages views yang akan kita buat.

YUK KITA MULAI SEKARANG GUYS..!!!

Pertama kita buat dahulu View untuk menampilkan data nya kita berinama List.vue dan kita simpan pada folder :

untuk codingnya sbb :

<template>
    <div>
        <Layout>
            <div class="container-fluid">
                    <h2> List Customer </h2>
            <table class="table table-bordered bg-white">
                <tr>
                    <th> No. </th>
                    <th>Nama</th>
                    <th>Email</th>
                </tr>
                <tr v-for="(list, index) in lists" :key="list.id">
                    <td> {{ index + 1}} </td>
                    <td>{{ list.nama }}</td>
                    <td>{{ list.email }}</td>
                </tr>
            </table>        
            </div>
        </Layout>
    </div>
</template>
<script>
import Layout from './../../Shared/Layout' //Import Layouts
export default {
    components : {
        Layout,
    },
    props : ['lists']  
}
</script>

Coding diatas kita melakukan import Layouts dan props lists bagi anda yang belum mengetahui apa itu props silahkan baca disini, dan bagi anda yang ingin mengetahui cara membuat layouts dengan Inertia JS silahkan baca disini lalu kita melakukan looping untuk menampilkan data lists pada tabel.

Berikut Untuk Coding Di Controller Customer :

{
        $lists = Customer::all();
        return Inertia::render('Customer/List', [
            'lists' => $lists
        ]);
    }

dan agar request dapat berjalan jangan lupa membuat Routenya pada file web.php tambahkan coding sbb :

Route::get('/customer/list', 'CustomerController@list')
->name('customer.list');

Berikut hasilnya :

Kesimpulan :

Dengan menggunakan Laravel,Vue JS dan bantuan magic dari inertia js kita dapat dengan mudah menampilkan data dari database dan merendernya ke views, dengan props kita dapat melakukan passing data baik untuk data static maupung dynamic

Silahkan Tulis komentar dan pendapat anda mengenai implementasi Laravel,Vue Dan Inertia JS.

jangan lupa share ya tulisan ini agar semakin banyak yang menikmati kemudahan yang diberikan inertiajs dalam membangun webapps SPA.

Salam,
Adinata

#yukberkarya