Di panduan kali ini kursus codeiginiter private online akan membahas mengenai Cara Membangun Halaman Detail Menggunakan Laravel Vue.js, halaman detail tersebut nantinya berfungsi bagi menampilkan data yang lebih kompleks lagi, di panduan sebelumnya kita telah berhasil menampilkan data secara keseluruhan dari database teman-teman dapat lihat di bahan https://kursuswebprogramming.com/cara-menampilkan-data-menggunakan-laravel-dan-vue-js/
Cara Membangun Halaman Detail Menggunakan Laravel Vue.js langkah pertama-tama di teman-teman mesti membangun sebuah tag <router-link> nantinya router-link tersebut yang akan menghubungkan atau yang akan mengarahkan kita ke halaman detail yang kita tuju, bagi script router-linknya yaitu seperti dibawah ini :
Di router link tersebut terdapat name:readPost adalah sebuah name dari routernya dan idParam adalah sebuah id parameter, jadi di ketika kita akan mengklik tombol detail karenanya kita mesti menyertakan id selaku identitas data yang kita pilih sehingga di ketika kita pilih data yang pertama-tama karenanya akan muncul detail data dari data yang pertama-tama tersebut teman-teman dapat bikin di file app.js bagi scriptnya seperti dibawah ini :
Berikutnya silahkan teman-teman kursus codeiginiter private online bikin sebuah file dengan nama ReadComponent.vue, file tersebut berfungsi bagi menampilkan data dari halaman detail nya bagi scriptnya seperti dibawah ini :
Kemudian kita akan import file component yang telah kita bikin di app.js bagi scriptnya seprti dibawah ini :
Berikutnya kita akan membangun response bagi menjalankan querynya bagi scriptnya seperti dibawah ini :
Berikutnya kita akan membangun query di method show didalam controllernya bagi scriptnya seperti dibawah ini :
Berikutnya kita akan coba jalankan di browser karenanya akan terlihat hasilnya seperti dibawah ini :
Oke teman-teman kursus privat codeiginiter online begitulah pembahasan kita mengenai Cara Membangun Halaman Detail Menggunakan Laravel Vue.js.
Semoga bermanfaat.
Terima kasih.
sumber :kursuswebprogramming.com/blog/
