Is there a way to display data using Vuejs onChange Event

Question

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?

Answer 1

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>