I am faced with a situation where I have two Vue components. The first one triggers the opening of a modal, while the second one serves as the content within that modal in the form of a table and a brief form. Upon completing the form, my goal is to click on the save button within the content component, which should then save the content into an array and close the modal. However, the issue arises from the fact that the content component is nested within another component and is linked to a field in the same component. Even after attempting to set it to false by directly accessing the Component from my child component, it does not work despite being able to see that it is indeed false when using console.log. Could someone please take a look at my code?
DialogComponent:
html:
<v-dialog
class="mx-auto my-auto "
v-model="dialog"
persistent
max-width="fit-content"
width="fit-content" >
<template v-slot:activator="{ on, attrs }">
<v-btn
color="primary"
dark
v-bind="attrs"
v-on="on"
rounded
>
Add date
</v-btn>
</template>
<v-card>
<v-card-title>
<span class="headline">Generate Groups</span>
</v-card-title>
<v-card-text>
</v-card-text>
<v-divider class="mx-4"/>
<AddGroupsModal :new-group.sync="meetingsArray"/>
</v-card>
</v-dialog>
Script:
data : ()=>({
dialog: false,
menu: false,
modal: false,
menu2: false,
menu3: false,
meetingsArray: []
}),
Child/Content:
generateGroup(){
const newMeeting = {meetingUrl: "", meetingName: "", date: this.selectedDate, startTime: "", endTime: ""};
let finalMeetingArray = [];
this.model.forEach((model, i) => {
const key = `participant${i + 1}`;
newMeeting[key] = model.voterUniqueName;
newMeeting.startTime = model.startTime;
newMeeting.endTime = model.endTime
})
this.newGroup = [],
finalMeetingArray.push(newMeeting)
this.newGroup.push(newMeeting)
console.log(JSON.stringify(this.newGroup))
MeetingAdminComponent.data().dialog = false; -> here I am trying to close the
modal
console.log(MeetingAdminComponent.data().dialog)
}