Tulisan ini menjelaskan cara mudah menampilkan data dari database Laravel ke view Vue menggunakan Inertia JS. Pertama buat view List.vue untuk menampilkan data, lalu di controller ambil semua data dari tabel Customer dan lewatkan ke view menggunakan props. Selanjutnya buat route untuk halaman tersebut agar dapat diakses. Dengan menggunakan props, data dapat dengan mudah dikirim antara backend dan frontend, sehingga memudahkan pengembangan a

1. February 11,
2020
Cara mudah menampilkan data laravel vue dengan Inertia
JS
adinata.id/inertia-js/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 :
1/3

2. <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 :
2/3

3. 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
3/3