Created a functionality within the App.vue parent component to communicate with all child components, instructing them to close any open modals. Additionally, implemented a feature for a child component to notify the parent to hide the overlay when the main app div is clicked. For instance, if the services page displays a modal with details, an overlay is activated by the parent component App.vue, and clicking outside the modal triggers its closure along with a signal from the child to the parent to deactivate the overlay. This setup ensures that these actions are universally accessible rather than limited to a specific component.
<template>
<div id="app" v-cloak :class="{'overlay-layer' : overlay.active}" v-on:click="close($event)">
<Header/>
<transition>
<router-view v-on:overlay="overlay.active = $event" :closeAllModals="overlay.close"/>
</transition>
<Footer/>
</div>
</template>
<script>
import Header from '@/components/header/Header.vue';
import Footer from '@/components/footer/Footer.vue';
export default {
components: {
Header,
Footer
},
props: {
closeAllModals: Boolean
},
data: function() {
return {
overlay: { active: false, close: false }
};
},
methods: {
close(e) {
if (this.overlay.active && e.toElement.id === 'app') {
this.overlay = {
active: false,
close: true
}
}
}
}
};
</script>
Encountering an issue where the above implementation only functions once. Specifically, in the services page component:
import Header from '@/components/header/Header.vue';
import Footer from '@/components/footer/Footer.vue';
export default {
name: 'services',
components: {
Header,
Footer
},
props: {
closeAllModals: Boolean
},
data: function() {
return {
overlay: false,
activeMember: Object,
};
},
methods: {
setActiveMember(member, open) {
this.activeMember = member;
if (open) {
this.activeMember.active = true;
this.overlay = true;
} else {
this.activeMember.active = false;
this.overlay = false;
}
this.$emit('overlay', this.overlay);
this.$forceUpdate();
},
watch: {
closeAllModals: function() {
this.activeMember.active = false;
this.overlay = false;
this.$forceUpdate();
console.log('runs once');
}
}
};
Though the code executes properly initially, subsequent runs do not reflect desired behavior. The prop update is sent to the child component only once. Multiple attempts were made including watching the prop changes within the child component and forcing updates, however, the issue persists. Seeking a solution to ensure consistent execution every time.