Currently, I am utilizing Vue3 with options api in the code snippet below. Within my parent component, I have embedded a child component as demonstrated.
The issue arises during runtime where even though
showNotificationsWindowsContainertrue, the NotificationsWindowsContainer.vue<NotificationsWindowsContainer><div> element with an id in the parent component. Surprisingly, this resulted in the NotificationsWindowsContainer.vue<NotificationsWindowsContainer><div> in the parent component.
My intention is for the parent component to host the child component without the need for additional elements surrounding it.
The perplexing part lies in why the parent component's code shown cannot display the contents of
<NotificationsWindowsContainer>Child Component:
<template>
<div id="idDivNotificationsWindowsContainer" v-show="showNotificationsWindowsContainer">
</div>
</template>
<script>
export default {
name: 'NotificationsWindowsContainer',
data() {
return {
};
},
components: {},
props: {
showNotificationsWindowsContainer: {
type: Boolean,
default: true,
},
},
computed: {},
methods: {},
};
</script>
<style>
@import '../../../map/assets/css/NDVIComparisonTab/Notifications/NotificationsWindowsContainer.css';
</style>
Parent Component:
<template>
<NotificationsWindowsContainer
v-bind:showNotificationsWindowsContainer="showNotificationsWindowsContainer"
></NotificationsWindowsContainer>
</template>
<script>
export default {
name: 'NDVIComparisonGUI',
data() {
return {
showNotificationsWindowsContainer: true,
....
....
....
CSS of the Child Component:
#idDivNotificationsWindowsContainer{
position: absolute;
width: 500px;
height: 500px;
z-index: 1;
background-color: chartreuse;
}
This highlights the challenge mentioned above.