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 :
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 :
Selanjutnya kita akan buat beberapa contoh data yang nantinya akan kita tampilkan pada components/pages/StudentsComponents.vue yang untuk scriptnya seperti dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<template> <div> <!-- @remove-students custom atribute ivent --> <router-view v-bind:store="students" @remove-students="removeStudents"></router-view> </div> </template> <script> import DisplayStudent from "../../components/pages/DisplayStudentsComponent.vue"; import DetailStudent from "../../components/pages/DetailsStudentsComponent.vue"; export default { data() { return { //properties students: [ // object di dalam properties { id: "1", fullname: "Baldatun Gofur", gender: "1", phone: "08129999999", address: "Jln.Nangka RT.01/02 No.12 Citayam, Depok" }, { id: "2", fullname: "Baldatun Gofur", gender: "1", phone: "08129999999", address: "Jln.Nangka RT.01/02 No.12 Citayam, Depok" }, { id: "3", fullname: "Sinta Gofur", gender: "0", phone: "08129999999", address: "Jln.Nangka RT.01/02 No.12 Citayam, Depok" } ] }; }, methods: { removeStudents(data) { this.$delete(this.students, data); // student merupakan object dari data students } } }; </script> |
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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<template> <div> <div class="alert alert-secondary" role="alert">Member List Students..</div> <table class="table table-sm"> <thead> <tr> <td>#</td> <td>Fullname</td> <td>Gender</td> <td>Phone Number</td> <td>Action</td> </tr> </thead> <tbody> <tr v-for="data, index in store"> <th>{{noUrut(index)}}</th> <td>{{data.fullname}}</td> <td v-if="data.gender == 1">Male</td> <td v-else>Female</td> <td>{{data.phone}}</td> <td> <button class="btn btn-sm btn-danger" @click="removeStudents(index)"> <i class="fa fa-trash"></i> </button> <router-link :to="{name: 'detailstudents', params:{id:data.id}}" class="btn btn-sm btn-success" > <i class="fa fa-eye"></i> </router-link> </td> </tr> <tr v-show="!store.length"> <td colspan="5" class="alert alert-danger">{{ 'List of Students Member Still Empty..' }}</td> </tr> </tbody> </table> </div> </template> <script> export default { props: ["store"], // dari file StudentsComponents.vue data() { return {}; }, methods: { noUrut: function(start) { return start + 1; }, removeStudents(id) { this.$emit("remove-students", id); // remove-students dari file StudentsComponents.vue } } }; </script> |
Jika kita jalankan kembali pada browser maka akan terhat hasilnya seperti dibawah ini :
Oke teman-teman itulah pembahasan kita tentang Cara Menampilkan Data Dengan Menggunakan Nested Router Laravel Vue.js semoga bermanfaat.
Terima kasih.