Vue Laravel Dynamic Dependent Dropdown - laravel

Question

I am trying to get the Decoration types according to the house area types. I got the house area types but failed to get the decoration types. In Vue dev tool the "houseTypes" are showing an array but the "decorTypes" are showing "Reactive". I am also dynamically creating rows and removing them. for that i took an array
my vue file is--
<template>
<div v-for="(tab,k) in tabs" :key="k" >
<table class="table table-borderless col-md-12">
<thead>
<th>HouseAreaType</th>
<th>DecorationType</th>
<th>Action</th>
</thead>
<tbody>
<td>
<select
v-model="tab.selectedHouseType"
class="form-control select2"
id="houseType1"
required
name="houseAreaTypeId"
>
<option
v-for="houseType in houseTypes"
:key="houseType.id"
:value="houseType.id"
>
{{ houseType.name }}
</option>
</select>
</td>
<td>
<select
v-model="selectedDecor"
#change="getDescription()"
class="form-control select2"
required
>
<option
selected
v-for="decorType in decorTypes"
:key="decorType.id"
:value="decorType.id"
>
{{ decorType.name }}
</option>
</select>
</td>
<input type="submit" class="btn btn-success" value="Save" />
</td>
<td>
<input
type="button"
class="btn btn-success"
value="Add More"
#click="addRow"
/>
</td>
<td >
<input
type="button"
class="btn btn-danger"
value="Remove"
#click="removeRow(k,tab)"
/>
</td>
</tbody>
</table>
</div>
</template>
<script type="module">
export default {
data() {
return {
tabs: [{
rate:"",
selectedHouseType: "",
selectedDecor: "",
}],
tabCounter: 0,
houseTypes: {},
decorTypes: {},
};
},
methods: {
getHouseTypes() {
axios.get("/api/houseTypes").then((response) => {
this.houseTypes = response.data;
// this.productForm.colors = response.data;
});
},
addRow() {
this.tabs.push(this.tabCounter++);
},
removeRow(index,tab) {
var idx = this.tabs.indexOf(tab);
console.log(idx, index);
this.tabs.splice(idx, 1);
},
},
watch: {
'tab.selectedHouseType': function (value){
axios.get('/api/decorTypes?houseAreaTypeId=' + value)
.then((response) => {
console.log(response.data);
this.decorTypes = response.data.data;
});
},
},
mounted() {
this.getHouseTypes();
},
};
</script>
my api.php---
Route::get('/houseTypes',[CartController::class,'getHouseTypes'])->name('houseTypes');
Route::get('/decorTypes',[CartController::class,'getDecorTypes'])->name('decorTypes');
my CartController--
public function getHouseTypes()
{
$houseTypes = HouseAreaType::all();
return response()->json($houseTypes);
}
public function getDecorTypes()
{
$houseAreaTypeId = request('houseAreaTypeId');
$decorTypes = DecorationType::where('houseAreaTypeId',$houseAreaTypeId)->get();
return response()->json($decorTypes);
}

Answer 1

solved iy.
created a method getDecor()..
<select
v-model="tab.selectedHouseType"
#change="getDecor()"
class="form-control select2"
id="houseType1"
required
name="houseAreaTypeId"
>
in the mthods--
getDecor(){
axios.get('/api/decorTypes', {
params: {
houseAreaTypeId: this.tabs[this.tabs.length-
1].selectedHouseType
}
}).then(function(response){
console.log(response.data);
}.bind(this));
}