I am currently using Vue3 in combination with Bootstrap 5.
MY ISSUE: I am trying to click a button in my parent.vue. Upon clicking, I want to retrieve the data from my child.vue and access it within the method in my parent.vue.
However, the data always remains empty unless I implement another setTimeout function, which I would like to avoid if possible.
I believe there is a more efficient solution for the props Boolean as well.
If you have any further questions regarding my dilemma, feel free to ask!
Thank you for your assistance!
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 IT'S EMPTY. ANOTHER SET_TIMEOUT WOULD WORK, BUT I WANT TO AVOID IT.
//IT WORKS LIKE THIS, BUT I PREFER NOT TO USE 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>