Pada materi kali ini kita akan membahas tentang Cara Menampilkan Data Dengan Menggunakan Nested Router Laravel Vue.js untuk membuat proses tampil data kali ini kita akan menggunakan project dari tutorial sebelumnya yaitu https://kursuswebprogramming.com/cara-membuat-nested-router-menggunakan-laravel-dan-vue-js/

Cara Menampilkan Data Dengan Menggunakan Nested Router pada folder app.js yang telah kita buat sebelumnya kita akan membuat menu untuk mengarahkan kita ke halaman yang akan kita tuju, untuk script seperti dibawah ini :

Cara Menampilkan Data Dengan Menggunakan Nested Router Laravel Vue.js

Pada script diatas terdapat fungsi vue.js yaitu <router-link>, <router-link> merupakan sebuah component yang telah disediakan oleh vue.js yang berfungsi untuk mengarahkan ke halaman yang dituju, dan didalam router-link tersebut juga terdapat directive :to yang dapat kita isi sesuai dengan alamat url atau router yang akan diakses.

Berikutnya kita akan coba lihat hasinya pada browser maka akan dengan menjalankan php artisan serve dan npm run watch maka akan terlihat hasilnya seperti dibawah ini :

Cara Menampilkan Data Dengan Menggunakan Nested Router Laravel Vue.js

Selanjutnya kita akan buat beberapa contoh data yang nantinya akan kita tampilkan pada components/pages/StudentsComponents.vue yang untuk scriptnya seperti dibawah ini :

Ket : pada script diatas terdapat fungsi atau method removeStudent yang berfungsi untuk menghandle proses delete datanya

Berikutnya kita akan membuat proses untuk tampil datanya pada file displayStudentsComponent.vue untuk scriptnya seperti dibawah ini :

Jika kita jalankan kembali pada browser maka akan terhat hasilnya seperti dibawah ini :

Cara Menampilkan Data Dengan Menggunakan Nested Router Laravel Vue.js

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

Terima kasih.

WhatsApp chat