Fix for chained select vue js component - laravel

Question

I have 2 select dropdown boxes, one for home types and another for duration, i have been able to fetch data into the hometype dropdown but the duration dropdown is not fetching data.
Anyone, please help resolve
This is a vue component
<script>
export default {
mounted() {
console.log('Component mounted.')
},
data(){
return {
selectedHomeType: 0,
HomeTypes: [],
selectedDuration: 0,
durations: []
}
},
methods:{
getHousetypes: function(){
axios.get('api/getHousetypes')
.then(function (response) {
this.HomeTypes = response.data;
}.bind(this));
},
getDuration: function() {
axios.get('api/getDuration',{
params: {
house_type_id: this.selectedHomeType
}
}).then(function(response){
this.Durations = response.data;
}.bind(this));
}
},
created: function(){
this.getHousetypes()
}
}
</script>
<template>
<div>
<div class=" col-xs-4 text-center">
<label>Select HomeType:</label><div class="col-xs-4 text-center">
<select name="Housetype" class='form-control centre' v-model='selectedHomeType' #change='getHousetypes()'>
<option value='0' >Select HomeType </option>
<option v-for='HomeType in HomeTypes' :value='HomeType.id' v-bind:key="HomeType.id">
{{ HomeType.House_Type }}
</option>
</select>
</div>
</div>
<div class="form-group col-xs-4 text-center">
<div class="form-group">
<label>Select Durations:</label>
<select class='form-control' v-model='selectedDuration'>
<option value='0' >Select Durations</option>
<option v-for='duration in durations' :value='duration.id' v-bind:key="duration.id">
{{ duration.duration }}
</option>
</select>
</div>
</div>
</div>
</template>
Sample JSON Data
Data for Hometypes
{
"success": [
{
"id": 1,
"created_at": "2019-09-26 08:44:00",
"updated_at": "2019-09-26 08:43:58",
"House_Type": "1 Bedroom",
"status": "1"
},
{
"id": 2,
"created_at": "2019-09-26 08:44:00",
"updated_at": "2019-09-26 08:43:58",
"House_Type": "2 Bedroom",
"status": "1"
},
{
"id": 3,
"created_at": "2019-09-26 08:44:00",
"updated_at": "2019-09-26 08:43:58",
"House_Type": "3 Bedroom",
"status": "1"
},
{
"id": 4,
"created_at": "2019-09-26 08:44:00",
"updated_at": "2019-09-26 08:43:58",
"House_Type": "3 Bedroom Penthouse",
"status": "1"
},
{
"id": 5,
"created_at": "2019-09-26 08:44:00",
"updated_at": "2019-09-26 08:43:58",
"House_Type": "4 Bedroom",
"status": "1"
}
]
}
Data for Durations
[
{
"id": 13,
"created_at": "2019-09-26 08:46:15",
"updated_at": "2019-09-26 08:46:17",
"house_type_id": 5,
"duration": "9 Months",
"status": "1"
},
{
"id": 14,
"created_at": "2019-09-26 08:46:15",
"updated_at": "2019-09-26 08:46:17",
"house_type_id": 5,
"duration": "6 Months",
"status": "1"
},
{
"id": 15,
"created_at": "2019-09-26 08:46:15",
"updated_at": "2019-09-26 08:46:17",
"house_type_id": 5,
"duration": "3 Months",
"status": "1"
}
]
See Image RepresentationOn Select HomeType 1 Bedroom Durations for 1 Bedroom show display eg 3 months, 6 months and 9 months in the Durations Select Box

Answer 1

I think you mistakenly connected the wrong ajax method to the change event on the house type select box.
I think your logic is to update durations when you change the house type, but you are currently refreshing the house types available:
<select name="Housetype" class='form-control centre' v-model='selectedHomeType' #change='getDuration()'>
<option value='0' >Select HomeType </option>
<option v-for='HomeType in HomeTypes' :value='HomeType.id' v-bind:key="HomeType.id">
{{ HomeType.House_Type }}
</option>
</select>
Update
Make sure your variable names are correct throught the code.
For example, you first define durations variable, but then try to assign this.Durations (notice the capital letter).
This might not be the issue, but may be confusing for other programmers.
I would suggest to use snake_case or camelCase to name your variables and stick to that convention you have chosen in your code. Usually, PascalCase is used for class names.
To quickly read more about different types of casing, check out this medium post
Update #2
To display data in Vue you can use {{ your_variable_here }} syntax anywhere in your component template.
That's really simple, just put the printing syntax where you need in the html template.
For example, to print the selection you can check if selectedHomeType's value is different than 0 (because 0 would be "Select HomeType"'s index) with the v-if directive. Then inside this div put the code that you want to display when the given if condition is true.
In there you can use the selectedHomeType value to get the chosen element from the homeTypes array.
<div v-if="selectedHomeType !== 0">
<p>The selected HomeType is: {{ this.homeTypes[selectedHomeType - 1].House_Type }}</p>
</div>