How to get ion-select data attribute of select option

Ionic Framework Ionic Vue
1

How to get additional data-type attribute of ion-select-option in @ionChange event?

I want to set formData.type base on which option is currently selected. This is the solution that works for vue select but ion-select-option doesnt have $event.target.options nor $event.target.selectedIndex.

Please help, thank you!

<ion-select v-model="formData.customer_id"
                @ionChange="formData.type = $event.target.options[$event.target.selectedIndex].getAttribute('data-type')"
                label="Výber odberateľa"
                label-placement="floating" fill="outline" interface="popover">
      <ion-select-option v-for="value in locations"
                         :key="value.id"
                         :value="value.id"
                         :data-value="value.id"
                         data-type="transport">{{ value.description }}</ion-select-option>
      <ion-select-option v-for="value in customers"
                         :key="value.id"
                         :value="value.id"
                         :data-value="value.id"
                         data-type="sale">{{ value.company_name }}</ion-select-option>
    </ion-select>
    {{ formData.type }}
2

you did not provide enough information in your question… no information on the shape of the objects in locations, customers or formData…

BUT you are new so I tried to help you out anyway.

<template>
  <ion-select
    v-model="formData"
    label="Výber odberateľa"
    label-placement="floating"
    fill="outline"
    interface="popover"
  >
    <ion-select-option
      v-for="value in locations"
      :key="value.id"
      :value="{ ...value, type: 'transport' }"
      >{{ value.description }}</ion-select-option
    >
    <ion-select-option
      v-for="value in customers"
      :key="value.id"
      :value="{ ...value, type: 'sale' }"
      :data-value="value.id"
      @click="doClick"
      >{{ value.company_name }}</ion-select-option
    >
  </ion-select>
  {{ formData }}
</template>

<script lang="ts" setup>
import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
import { ref } from 'vue';
const formData = ref();
const customers = [
  { id: '1', company_name: 'company 1' },
  { id: '2', company_name: 'company 2' },
];
const locations = [
  { id: '10', description: 'description 1' },
  { id: '20', description: 'description 2' },
];

</script>

this solution just returns the whole object with the type added to the selected value

{ "id": "1", "company_name": "company 1", "type": "sale" }

See the working project here - Ionic Docs Example - StackBlitz

Here is a video - Loom | Free Screen & Video Recording Software | Loom