I'm working with Vue3 and Bootstrap 5.

MY PROBLEM: I want to click a button in my parent.vue. And after clicking this I want to have the data from my child.vue inside of the method in my parent.vue - method .

But my data is always empty, except I need another ```setTimeout"-function. But actually I don't want to use it.

I think there is a better solution for the props Boolean as well..

If there are any question left regarding my problem, please ask me!

Thanks for trying helping me out!

PARENT:

<template>
  <Child :triggerFunc="triggerFunc" @childData="childData"/>
  <button type="button" class="btn btn-success" @click="get_data()">Get Data</button>
</template>

<script>
  export default {
    data() {
      return {
        triggerFunc: false,
        c_data: [],
      }
    },
    
    methods: {
    
      childData(data) {
        this.c_data = data;
      },
    
      get_data() {
        this.triggerFunc = true;
        setTimeout(() => {
          this.triggerFunc = false;
        }, 50);
        
        console.log(this.c_data);
        //HERE I WANT TO USE "C_DATA" BUT OF COURSE IT's EMPTY. WITH ANOTHER SET_TIMEOUT IT WOULD WORK 
        //BUT I DON'T WANT TO USE IT. BUT WITHOUT IT'S EMPTY. 


        //LIKE THIS IT WOULD WORK BUT I DON'T WANT IT LIKE THAT
        setTimeout(() => {
          console.log(this.c_data);
        }, 50);
      }
    },
  }
</script>

CHILD:

<template>
  <!-- SOME BUTTONS, INPUTS, ETC. IN HERE -->
</template>

<script>
  export default {
    data() {
      return {
        input1: "",
        input2: "",
      }
    },
    
    props: {
      triggerFunc: Boolean, 
    },
    
    triggerFunc(triggerFunc) {
       if(triggerFunc == true) {
         this.save_data()
       }
     }
    
    methods: {
      save_data() {
      var data = [
        {
          Input1: this.input1,
          Input2: this.input2
        },
      ]

      this.$emit("childData", data);
    },
    },
  }
</script>