Whenever an event is triggered, a function is called to populate a variable and open a modal from a child component. However, in the modal, the new variable appears empty initially. If I close and then reopen the modal, the data finally loads.
I have attempted to load the child component only after having the necessary data, but so far without success.
Parent
<p class="open-modal-button" @click="openUpdatesModal">
<i class="fas fa-sync"></i>
Check for updates
</p>
<check-for-updates-modal
v-if="check_for_updates_values.account_name != ''"
:modalUpdatesOpen="modalUpdatesOpen"
:check_for_updates_values="check_for_updates_values"
/>
data() {
return {
//code....
check_for_updates_values: [],
modalUpdatesOpen: false,
};
}
openUpdatesModal() {
this.temporaryChecker();
},
temporaryChecker() {
this.check_for_updates_values.account_name = this.account_name;
this.check_for_updates_values.company_registration_number = this.company_registration_number;
this.check_for_updates_values.registered_address = this.registered_address;
this.modalUpdatesOpen = !this.modalUpdatesOpen;
},
Child
<b-col>{{check_for_updates_values.account_name}}</b-col>
props: [
"modalUpdatesOpen",
"check_for_updates_values",
],
watch: {
modalUpdatesOpen() {
this.checkForChanges();
this.$bvModal.show("modal-check-for-updates");
},
},