Chained dropdown atau bahasa lainnya dropdown yang berkait (atau apa yang lain istilahnya…) biasanya ditemukan ketika membuat sebuah pilihan yang pilihan tersebut bergantung pada pilihan sebelumnya. Misalkan untuk memilih kota harus memilih provinsi terlebih dahulu., atau untuk memilih sebuah sub-kategori harus memilih kategori terlebih dahulu.

Sebenernya caranya gampang, algoritmanya cuma ketika dropdown pertama berubah valuenya, gunakan valuetersebut untuk mendapatkan data pada dropdown kedua.

Kali ini saya akan tunjukkan cara membuatnya menggunakan framework laravel dan komponen vuejs. Untuk tabel, dalam kasus ini saya menggunakan migration sebagai berikut

Isi dengan nilai yang diinginkan, kalo mau pake model factory juga bisa kok, tinggal disesuaikan aja, kemudian jalankan seedernya

Untuk routingnya seperti berikut, cuma ngambil data aja dari category dan subcategory

Vue component yang saya gunakan seperti berikut, berada pada /resources/assets/js/components dengan nama Category.vue

Daftarkan komponen tersebut pada app.js dan tambahkan sedikit perubahan pada vue instance nya

Kemudian panggil pada welcome.blade.php

Jalankan webpack dengan perintah
[bash]npm run watch[/bash]

Jalankan webserver dengan perintah
[bash]php artisan serve[/bash]

Semoga berhasil..

Mau di upload di github tapi blm sempet ya