Seperti yang kita ketahui hampir setiap framework mempunyai sebuah fitur yaitu router, router tersebut berfungsi untuk mengatur jalannya sebuah aplikasi atau system yang kita buat, seperti tampil data, edit data, delete data dan yang lainnya, pada materi kali ini kita akan membahas tentang Cara Menampilkan Detail Data Menggunakan Nested Router Laravel Vue.js, pada materi sebelumnya kita telah berhasil menampilkan semua data untuk materinya teman-teman bisa lihat pada https://kursuswebprogramming.com/cara-menampilkan-data-dengan-menggunakan-nested-router-laravel-vue-js/

Untuk file project kali ini kita menggunakan file project pada tutorial sebelumnya, untuk membuat detail datanya silahkan teman-teman buka file DetailStudentsComponent.vue, jadi nanti kita dapat menampilkan data berdasarkan data yang kita pilih untuk scriptnya seperti dibawah ini :

Ket :

Pada script diatas terdapat perintah props: [“store”], merupakan nama atribut yang terdapat pada file StudentsComponent.vue dengan inisial store. Berikutnya kita akan return sebuah property uId untuk mendapatkan berdasarkan data yang kita pilih berdasarkan id yang kita pilih.

Selanjutnya kita akan membuat sebuah alert pada DashboardComponent.vue alert berfungsi untuk menampilkan notifikasi pada saat kita membuka halaman awal  untuk scriptnya seperti dibawah ini :

Cara Menampilkan Detail Data Menggunakan Nested Router Laravel Vue.js

Jika kita jalankan pada bowser maka akan terlihat hasilnya seperti dibawah ini :

  • Halaman dashboard
Cara Menampilkan Detail Data Menggunakan Nested Router Laravel Vue.js
  • Halaman students
Cara Menampilkan Detail Data Menggunakan Nested Router Laravel Vue.js
  • Detail halaman
Cara Menampilkan Detail Data Menggunakan Nested Router Laravel Vue.js

Oke teman-teman itulah pembahasan kita tentang Cara Menampilkan Detail Data Menggunakan Nested Router Laravel Vue.js

Semoga bermanfaat.

Terima kasih.

WhatsApp chat