Get ID From An Array On Change

Question

I have an array of data which is gotten from an api and is displayed using Vuejs like this

<div class="col-sm-9"> 
   <Select class="form-control" name="building" v-model="allBuild.id" @change="showBuilding()">
    <option v-for="b in allBuilding" :key="b.id" :value="b.id">
      {{ b.description }}
     </option>
   </Select>
</div>

data(){
  return {
  allBuilding: [],
        allBuild:{
            id: null
        },
}
}

 async created(){
      let self = this;
    await axios.get( self.$apiAdress + '/api/electricity-building?token=' + localStorage.getItem("api_token") )
        .then(response => {
            self.allBuilding = response.data
            // for(index in Object.keys(self.allBuilding)){
            //     self.allBuild = self.allBuilding[0].fields.id
            // }
            if(response.data.length){
                this.allBuild = response.data.id
            }
        })
}

 showBuilding()
    {
        
       
            console.log(this.allBuild)
        
    },

My Question is that how do i get the ID of each data when the onchange is fired. if i click the building from the list of all building displayed i get the id of the first element in the array which isn't what i want.

What i want is that any building i click i should get an id of each.

For example click building 1 get id 1 click building 2 get id 2 click building 3 get id 3

etc

Answer 1

try this:

showBuilding(evt){
 console.log(evt.target.value)
}