Laravel, changing form fields based on category selection - laravel

Question

I have 2 categories in my db named 'House Rental' and 'Vehicle rental'
Users can post free ads based on the two categories.
My Listing model contains this:
Schema::create('listings', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->text('body');
$table->unsignedBigInteger('user_id');
$table->unsignedBigInteger('area_id');
$table->unsignedBigInteger('category_id');
$table->boolean('live')->default(false);
$table->softDeletes();
$table->timestamps();
$table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
$table->foreign('area_id')->references('id')->on('areas')->onDelete('cascade');
$table->foreign('category_id')->references('id')->on('categories')->onDelete('cascade');
});
When a user visits add listing form, say he selects 'House Rentals' category, I want the add form to show fields like 'size', 'rooms', 'building_type', 'is_furnished', 'is_parking', etc.
At the same time if a user adds a listing and he selects 'Vehicle Rentals', I want the add form to show fields like 'vehicle_model', 'year_of_registration', 'condition', etc.
How would I go about doing this?

Answer 1

This is a single vue component that can be of assistance
<template>
<div>
<form #submit.prevent="iEdit ? iUpdate(): createMethod()">
<label> Select Rental </label>
<select class="form-control" #change="rentalChanged($event)" v-model="rentalForm.rental_category">
<option value="house rental"> House Rental </option>
<option value="vehicle rental"> Vehicle Rental </option>
</select>
<select v-if="house_rental">
<!-- show house rental options -->
</select>
<select v-if="vehicle_rental">
<!-- show vencle rental options -->
</select>
</form>
</div>
</template>
<script>
name: 'componentName',
data(){
return {
rentalForm: new Form({
rental_category: '',
another_form_field:'',
}),
iEdit : false,
vehicle_rental :false,
house_rental: false,
}
},
methods{
rentalChanged(event){
if(event.target.value == 'house rental'){
this.house_rental = true;
this.vehicle_rental = false;
}
if(event.target.value == 'vehicle rental'){
this.house_rental = false;
this.vehicle_rental = true;
}
},
iUpdate(){
//update method
},
createMethod(){
//create method
},
},
mounted(){
}
</script>
I hope it gives a clue I didn't test it.