Fill ion-modal with values when parent onMounted

Ionic Framework Ionic Vue
1

I used successfully @aaronksaunders tutorial to create a modal window and fill and save the content.

note: it is an continuation of the example use this component directly in their template from the docs

however now I have another modal window which content is only available later (in the onMounted event of the parent). hence every time I want to open the modal window the first time all the content values are empty. the second time it works. somehow I can’t fix this lifeCycle problem
I update all the values in the click method and they should in fact be upToDate every time but since in the template of the parent the line which shows the insertion of the Modal window in the parent

<EditWeather :is-open="editFieldWeather.show" :clouds="editFieldWeather.clouds" />

is created when the parent is created editFieldWeather.clouds is always empty the first time I open the modal window. the parameter doesn’t hand over the current value somehow. can someone help me?

2

please post some sample code somewhere for review? AND thx for watching my content

3

hint: I tried to hand over editFieldWeather.clouds as well as the ref clouds

Home.vue

<template>
...
 <ion-button @click="editWeather(true)" slot="end">
             <EditWeather :is-open="editFieldWeather.show" :clouds="editFieldWeather.clouds" @edit-closed="handleModalClosedWeather"/>
...
</template>
...
 setup() {
  const weatherData: any = ref(); 
  const clouds = ref();

   const editFieldWeather= reactive<{show: boolean; data: any; clouds: any}>({
      show: false,
      data: null,
      clouds: clouds
    });

 const handleModalClosedWeather = (event: any) => {
       editFieldWeather.show = false; 
       editFieldWeather.data = event;
       if(editFieldWeather.data.isCancelled == false){
         clouds.value = editFieldWeather.data.formInfo['clouds'];
       }
       console.log(JSON.stringify(editFieldWeather.data));
    }

   onMounted (async () => {
    await WeatherService.getWeatherInformation().then(response => {
        weatherData.value = response;
        clouds.value = response.clouds.all.toString();
       }).catch((error)  => {
          console.log(error);
      });
  });

...
methods: {
 editWeather(edit: boolean) {
       this.editFieldWeather.clouds = this.clouds;
       this.editFieldWeather.show = edit;
    },

}

Modal.vue

<template>
    <ion-modal :is-open="isOpen"  @onDidDismiss="handleDidDismiss(true)">
<ion-label>Clouds /ion-label>
            <ion-input v-model="formInfo.clouds" :value="clouds"> </ion-input>
</ion-modal>
  <ion-page>

</template>
export default defineComponent({
  name: 'Weather',
  props: {
      isOpen : {
        default: false,
        required: true
    },
    clouds: String,
  },

  setup(props: any, ctx: SetupContext) {

      const formInfo = ref<any>({
        clouds: "",
      });

      const handleDidDismiss = (isCancelled: boolean) => {
        if(!props.isOpen) return; 
        if(isCancelled) formInfo.value = {clouds: props.clouds }; 
        ctx.emit("edit-closed", {isCancelled, 
        formInfo: !isCancelled ? formInfo.value : null});
      }
4

I solved this by getting and filling the async data in the child onMounted event as well