Ionic Vue - Ion-select pre-select Item (initial selected value)

Ionic Framework Ionic Vue
1

I don’t want to open a duplicate forum entry about this issue but I dont think it was ever adressed in Ionic Vue.

the problem is kind of similar to this post. How do I easily and properly pre-select a value if the ion-select is filled later on in the onMounted event. thus the ion-select-options are loaded like

<ion-select-option v-for="record in recordData" :key="record.id" :value="record.name">{{ record.name}}</ion-select-option>

the ion-select is like

<ion-select mutliple="false" :v-model="recordData" :selected-text="selectedRecord" :value="selectedRecord" @ionChange="onChange($event, 'record')">

but here I don’t know how I should properly use :value and :selected-text. the ion-select never gets filled with an initial value and also never gets selected properly inside the list. the v-model should be correct though. does someone know how to do it to get the right behavior of the ion-select with an pre-intial-selection?

2

can you provide some sample code? beyond just the specific component?

3

@aaronksaunders I tried several ways:

in setup:

const recordData= ref<Record[]>();
const selectedRecord = ref<Record[]>();

in onMounted select currentRecord or first entry:

 const loadedRecord: rec = {
        id: currentRecord.value.id,
        name: currentRecord.value.name,
       };
        if(currentRecord.value.id != 0){ //load Record
                    selectedRecord.value = loadedRecord.value;
                    //selectedRecord.value = [loadedRecord.name]; //or
                    currentRecord.value.id= loadedRecord.id;
                    currentRecord.value.name= loadedRecord.name;

                  }else{ //1st entry
                    selectedRecord.value = [recordData.value[0]];
                    currentRecord.value.site_nr= recordData.value[0].id;
                    currentRecord.value.site_name = recordData.value[0].name;
                  }

recordData are the whole record entries and are shown correctly in the ion-select

selectedRecord I tried as ref<Record[]>() but also as ref<string[]>() and as ref<Record>() and set the v-model and/or the selected-text with it. I also had recordData as v-model. nothing of it works

currentRecord contains the current record to either decide to select the specific record or select the 1st entry (shown above). but it doesn’t work unfortunately

4 
<template>
  <p>
    <ion-select
      mutliple="false"
      :selected-text="selectedRecord.name"
      @ionChange="itChanged"
    >
      <ion-select-option
        v-for="record in recordData"
        :key="record.id"
        :value="record"
        >{{ record.name }}</ion-select-option
      >
    </ion-select>
  </p>
  {{ selectedRecord }}
</template>

<script lang="ts">
import { IonSelect, IonSelectOption } from "@ionic/vue";
import { defineComponent, ref } from "vue";
export default defineComponent({
  setup() {
    const recordData = ref<any>([
      { name: "aaron", id: 1 },
      { name: "reina", id: 2 },
      { name: "bryce", id: 3 }
    ]);
    const selectedRecord = ref<any>({ name: "bryce", id: 3 });

    const itChanged = (v: any) => {
      selectedRecord.value = v.detail.value;
    };
    return {
      itChanged,
      recordData,
      selectedRecord
    };
  },
  components: {
    IonSelect,
    IonSelectOption
  }
});
</script>

<style lang="scss" scoped>
</style>
1 Like
5

thank you @aaronksaunders for looking into my issue and posting your suggestion. it helped me to cleanse my code and to solely use selected-text in the ion-select

however the initial selection still doesn’t work and I have the assumption its because the ion-select gets filled later on (await from sqlite-data) as Record[] and then doesn’t realize the setting of selection afterwards. or could it be something to do with my datatypes or references of the refs

    const recordData = ref<Record[]>();
    const selectedRecord= ref<Record>();

any help is very much appreciated

6

I cannot even understand what you are doing in your onMounted statement? It looks overly complex can you simplify / explain what you are doing?

7

the program logic goes like this:

one can either create a new record (currentRecord.value.id == 0) or edit a record (currentRecord.value.id != 0).

if you have a new record the first track should be selected initially [if there is one] in the ion-select with selectedRecord.value = recordData.value[0];. if you edit a record the track should be selected which was saved before and therefore loaded like selectedRecord.value = loadedRecord.value;