Pada tutorial kali ini kita akan membahas tentang Cara Membuat Halaman Detail Menggunakan Laravel Vue.js, halaman detail tersebut nantinya berfungsi untuk menampilkan data yang lebih kompleks lagi, pada tutorial sebelumnya kita telah berhasil menampilkan data secara keseluruhan dari database teman-teman bisa lihat pada materi https://kursuswebprogramming.com/cara-menampilkan-data-menggunakan-laravel-dan-vue-js/

Cara Membuat Halaman Detail Menggunakan Laravel Vue.js langkah pertama pada teman-teman harus membuat sebuah tag <router-link> nantinya router-link tersebut yang akan menghubungkan atau yang akan mengarahkan kita ke halaman detail yang kita tuju, untuk script router-linknya yaitu seperti dibawah ini :

Cara Membuat Halaman Detail Menggunakan Laravel Vue.js

Pada router link tersebut terdapat name:readPost merupakan name dari routernya dan idParam merupakan id parameter, jadi pada saat kita akan mengklik tombol detail maka kita harus menyertakan id sebagai identitas data yang kita pilih sehingga pada saat kita pilih data yang pertama maka akan muncul detail data dari data yang pertama tersebut teman-teman bisa buat pada file app.js untuk scriptnya seperti dibawah ini :

Cara Membuat Halaman Detail Menggunakan Laravel Vue.js

Berikutnya silahkan teman-teman buat sebuah file dengan nama ReadComponent.vue, file tersebut berfungsi untuk menampilkan data dari halaman detail nya untuk scriptnya seperti dibawah ini :

Cara Membuat Halaman Detail Menggunakan Laravel Vue.js

Kemudian kita akan import file component yang telah kita buat pada app.js untuk scriptnya seprti dibawah ini :

Cara Membuat Halaman Detail Menggunakan Laravel Vue.js

Selanjutnya kita akan membuat response untuk menjalankan querynya untuk scriptnya seperti dibawah ini :

Cara Membuat Halaman Detail Menggunakan Laravel Vue.js

Berikutnya kita akan membuat query pada method show didalam controllernya untuk scriptnya seperti dibawah ini :

Cara Membuat Halaman Detail Menggunakan Laravel Vue.js

Selanjutnya kita akan coba jalankan pada browser maka akan terlihat hasilnya seperti dibawah ini :

Cara Membuat Halaman Detail Menggunakan Laravel Vue.js

Oke teman-teman itulah pembahasan kita tentang Cara Membuat Halaman Detail Menggunakan Laravel Vue.js.

Semoga bermanfaat.

Terima kasih.

WhatsApp chat