My Web Api has methods that load the first select and then dynamically load the options for the second select, with a parameter passed from the first selection.
The URL structure for the second select is as follows: http://localhost:58209/api/Tecnico/Tanque/?estacionid=@parameter
I am using Vuetify for the front end, and to load the options for the second v-select, I have implemented the following code:
<v-flex xs12 sm8 md6>
<v-select autocomplete :items="itemsEstacion" item-text="numeroEstacion" item-value="estacionID" prepend-icon="local_gas_station" :loading="loading" label="Seleccionar Destino" v-model="selectEstacion"></v-select>
</v-flex>
<v-flex xs12 sm8 md6>
<v-select autocomplete :items="itemsTanque" v-model="selectTanque" item-text="NumTanque" item-value="ID" v-on:change="cargarTanques(itemsEstacion.estacionID)" prepend-icon="opacity" label="Seleccionar Tanque"></v-select>
</v-flex>
In my data() return{}, I have defined:
selectEstacion: "",
selectTanque: null,
itemsEstacion: [],
itemsTanque: [],
These are the methods I have implemented: - For loading the options for the first select
cargarEstaciones() {
this.loading = true;
axios
.get("GetEstaciones", {
headers: {
Authorization: "Bearer " + localStorage.getItem("token")
}
})
.then(response => {
this.loading = false;
console.log(response);
this.itemsEstacion = response.data;
})
.catch(error => {
this.loading = false;
if (error.response.status != null) {
switch (error.response.status) {
case 204:
this.snackbar = true;
this.textSnackbar = error.response.data;
break;
}
}
});
},
-For loading options for the second select:
cargarTanques(estacionID) {
axios
.get("Tecnico/Tanque/?estacionID=" + estacionID, {
headers: {
Authorization: "Bearer " + localStorage.getItem("token")
}
})
.then(response => {
console.log(response);
this.itemsTanque = response.data;
})
.catch(error => {
if (error.response.status != null) {
switch (error.response.status) {
case 404:
this.snackbar = true;
this.textSnackbar = error.response.data;
break;
case 500:
this.snackbar = true;
this.textSnackbar = error.response.data;
}
}
});
},
To handle the event, I have added this under watch:{}
selectEstacion: function() {
this.cargarTanques(this.itemsEstacion.estacionID);
}
However, I am facing issues where the parameter is always undefined. Additionally, the v-on:change attribute is not functioning properly so I had to resort to using watch() instead.
Thank you