How to get value from the select-option

Hi, I want to ask how to get value from the select-option

html
<ion-select placeholder="Select Month"  interface="popover" v-model="SelectedMonth" >
                <ion-select-option v-for="month in monthcom" :key="month" :value="month">
                  {{monthNum[month.csMonth-1]}} {{month.csYear}}
                </ion-select-option>
              </ion-select>
javascript
<script lang="ts">
import { defineComponent,ref, onMounted } from 'vue';
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, loadingController, IonCard, IonCardContent,
 IonDatetime, IonPopover, IonButton, IonIcon, IonInput, IonLabel, IonItem, IonSelect, IonSelectOption, toastController} from '@ionic/vue';

import datetimeHelper from "../../components/helpers/datetime";
import { TokenService } from '@/services/token.service';
import {incentiveService} from "../../services/incentivestatement.service";
import {MemberInterface} from '../../interfaces/memberInfo.interface'


export default defineComponent({
  name: 'IncentiveStatement',
  components: {  
    IonHeader, IonToolbar, IonTitle, IonContent, IonPage, IonCard, IonCardContent,
    //IonDatetime,IonPopover, IonButton, IonIcon, IonInput, 
    IonLabel, IonItem,
    IonSelect, IonSelectOption},
  data(){
    return  {
      monthNum : ["January","February","March","April","May","June","July","August","September","October","November","December"]
    }
  },
  methods:{
    formatDate(value:string)
    {
      if(value.length>10)
      {
        return value.substring(0, 10);
      }
      else{
        return value;
      }
    },
     
  },
  setup(){
     const dateFrom = ref(datetimeHelper.formatDateYYYYMMDD(datetimeHelper.getFirstDateOfMonth(datetimeHelper.getToday()), "-"));
    let currentMId = parseInt(TokenService.getCustomToken("mId") as string);
    const mList = ref<MemberInterface[]>([]);
    const monthcom = ref([]);
    const SelectedMonth = ref(0);

    onMounted(async ()=>{
      await pushData();
      console.log("Mounted");
    })

    const getMemberByMId = async()=>{
      const res = await incentiveService.getMemberByMId(currentMId).then(function(response){
        return response;
      })
      if(res.status ==200){
        if(res.data.success){
          if(res.data.returnData != "No Record Found"){
            mList.value = res.data.returnData;
            console.log('get member');
          }
        }
      }
    }
    

    const getMonthComm = async()=>{
      const res = await incentiveService.getMonthComm().then(function(response){
        return response;
      })
      if(res.status == 200){
        if(res.data.success){
          monthcom.value = res.data.returnData;
          console.warn(monthcom.value);
        }
      }
    }
    //console.log(SelectedMonth.value);
    const pushData =async() =>{
      await getMemberByMId();
      await getMonthComm();
      console.log('Pushed');
    }
    return{
      dateFrom,mList,getMemberByMId, 
      monthcom,SelectedMonth,
    }
  }
});
</script>

Capture4

Hello @Kaiyen725
Basically you should implement a handleChange event. here take a look at a simple sample implementation

check it out.

1 Like