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"  @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>

CodePudding user response：

Has your triggerfunc function been called

CodePudding user response：

1. Parent can very well hold/own the data of it's children. In that case, the children only render/display the data. Children need to send events up to the parent to update that data. (Here parent is the Key component and child is a Helper for the parent.)

   So, here parent always has the master copy of the child's data in its own data variables.

2. Also, you are using @ for binding properties, which is wrong. @ is for event binding. For data binding use ':' which is a shorthand for v-bind:

   You can just say :childData=c_data

PS: You seem to be getting few of the basics wrong. Vue is reactive and automatically binds the data to the variables. So, you don't have to do this much work. Please look at some basic Vue examples.

Refer: https://sky790312.medium.com/about-vue-2-parent-to-child-props-af3b5bb59829

Edited code:

PARENT:

    <template>
      <Child @saveClick="saveChildData" :childData="c_data" />
    </template>
    <script>
      export default {
        data() {
          return {
            c_data: [{Input1:"", Input2:""}]
          }
        },
        methods: {
          saveChildData(incomingData) {
            //Either set the new value, or copy all elements.
            this.c_data = incomingData;
          }
        },
      }
    </script>

CHILD:

    <template>
      <!-- SOME BUTTONS, INPUTS, ETC. IN HERE -->
      <!-- Vue will sync data to input1, input2. On button click we can send data to parent. -->
      <button @click.prevent="sendData" />
    </template>

    <script>
      export default {
        props:['childData'],
        data() {
          return {
            input1: "",
            input2: "",
          }
        },
        methods: {
          sendData() {
              var data = [
                {
                  Input1: this.input1,
                  Input2: this.input2
                },
              ]

              this.$emit("saveClick", data); //Event is "saveClick" event.
            },
        },
        beforeMount(){
            //Make a local copy
            this.input1 = this.childData[0].Input1;
            this.input2 = this.childData[0].Input2;
        }
      }
    </script>