I have this in my Vuejs component
<div class="col-sm-9">
<Select class="form-control" name="building" v-model="allBuild.id" @change="showBuilding($event)">
<option v-for="b in allBuilding" :key="b.id" :value="b.id">
{{ b.description }}
</option>
</Select>
</div>
how do i display the records coming from the api after a building is selected?
Use this way
<template>
<div id="app">
<select class="form-control" name="building" @change="showBuilding($event)">
<option v-for="b in allBuilding" :key="b.id" :value="b.id">
{{ b.description }}
</option>
</select>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: "App",
data() {
return {
allBuilding: [
{ id: "1", description: "A" },
{ id: "2", description: "B" },
],
};
},
methods: {
apiRequest( selectedOption ) {
axios.get(`host.ulr/${selectedOption}`).then( res=> {
// Something
}).catch( err=> console.warn( "Error" , err ) )
},
showBuilding(e) {
if(e.target.options.selectedIndex > -1) {
let selectedVal = e.target.options[e.target.options.selectedIndex].value;
console.log( selectedVal)
this.$forceUpdateapiRequest( selectedVal )
}
},
},
};
</script>