Ini adalah contoh load data daripada database apabila page mula load. Contoh ini digunakan untuk load data ke dalam dropdown list menggunakan
// app\Http\Controllers\UserController.phppublic function edit(User $user){ $permissions = $user->permissions->pluck('id'); $roles = $user->roles()->pluck('id'); return inertia('User/Edit', compact('user','roles','permissions'));}<!-- resources\js\Pages\User\RoleFields.vue --><script setup> import { ref, onMounted } from "vue" import axios from "axios" import unsaveChangesNotification from '@/Components/unsaveChangesNotification.vue' // utk share reactive value diantara component tanpa menggunakan props & emit import { form } from "@/stores/userFormStore" // utk simpan data const lists = ref([]) onMounted(() => { axios .get(route("role.list")) .then((data) => { // console.log(data.data) lists.value = data.data }) .catch((error) => { error = "Something is broken, try again later" if (error?.response.status === 422) { error = error.response.data.errors.file[0] } }) })</script><template> <div class="hidden sm:block" aria-hidden="true"> <div class="py-5"> <div class="border-t border-gray-200" /> </div> </div> <div class="mt-10 sm:mt-0"> <div class="md:grid md:grid-cols-3 md:gap-6"> <div class="md:col-span-1"> <div class="px-4 sm:px-0"> <h3 class="text-lg font-medium leading-6 text-gray-900">Role</h3> <p class="mt-1 text-sm text-gray-600">Choose custom role for user</p> </div> </div> <div class="mt-5 md:col-span-2 md:mt-0"> <div class="overflow-hidden shadow sm:rounded-md"> <div class="space-y-6 bg-white px-4 py-5 sm:p-6"> <fieldset> <unsaveChangesNotification :isDirty="form.isDirty" /> <legend class="sr-only">Roles</legend> <div class="text-base font-medium text-gray-900" aria-hidden="true">Roles</div> <div class="mt-4 space-y-4"> <div class="mt-1 sm:mt-0 sm:col-span-4"> <select id="roles" v-model="form.roles" name="roles" multiple class="max-w-lg block focus:ring-indigo-500 focus:border-indigo-500 w-full shadow-sm border-gray-300 rounded-md"> <option v-for="(item, index) in lists" :value="item.id" :key="index" > {{ item.name }} </option> </select> </div> </div> </fieldset> </div> <div class="bg-gray-50 px-4 py-3 text-right sm:px-6"> <button type="submit" class="inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Save</button> </div> </div> </div> </div> </div></template>// resources\js\stores\userFormStore.jsimport { useForm } from "@inertiajs/inertia-vue3"import { ref } from "vue"export const form = ref()Sebagai rujukan tambahan, userFormStore.js digunakan untuk share reactive value diantara component tanpa menggunakan props & emit. Kaedah ini juga dikenali dengan Store State in an External File
*kod ini adalah sebahagian daripada projek sebenar bertujuan untuk memberikan rujukan kasar mengenai penggunaan sesuatu kod dan bukan bertujuan untuk panduan langkah penyelesaian secara menyeluruh kerana setiap projek mempunyai keperluan yang berlainan