In my AddressController, I have a function called loadCity along with other CRUD functions:
public function loadCities(Request $request)
{
$provinceId = $request->province_id;
$cities = Province::where('province_id', $provinceId)->get();
return response()->json($cities);
}
Within my create.vue script:
<Multiselect v-model="form.province_id" :options="provinces" valueProp="id" label="name" trackBy="name" :searchable="true" placeholder="Select:" @change="loadCities" />
const cities = ref([]);
const loadCities = async () => {
try {
const response = await router.get(`/apps/address/load-cities/${form.province_id}`);
cities.value = response.data;
} catch (error) {
console.error(error);
}
}
Regarding my web.id route:
Route::resource('/address', AddressController::class, ['as' => 'apps'])
->middleware('permission:address.index|address.create|address.edit|address.delete')
->except(['show']);
Route::get('/address/load-cities/{province_id}', [AddressController::class, 'loadCities'], ['as' => 'apps'])
->name('apps.address.loadCities');
However, I am currently encountering an error:
The GET method is not supported for this route. Supported methods: PUT, PATCH, DELETE.
Can I implement dependent dropdowns using inertia router like this? Or is there something missing in my code? Thank you in advance.
Update: When I console.log(form.province_id), it returns null.