I have the following code snippet:
<div>
<compA />
<compB />
</div>
How can I ensure that compA is rendered only after compB is rendered?
The reason for this is that I have dependencies on certain elements in compA, and the styling of compB depends on the presence of these elements.
Explanation in detail:
I have a complex UI design where a box becomes fixed when you scroll. It should remain on the screen once it touches the header. To achieve this, I am using jquery-visible to determine if a div with a specific id is visible on the screen. If it's not visible, I change the style to make the box fixed. The following code illustrates my approach:
methods: {
onScroll () {
if ($('#divId').visible(false, false, 'vertical')) { // This is a div from compA, so it needs to be rendered first and be visible
this.isFixed = false
} else {
this.isFixed = true
}
}
},
mounted () {
window.addEventListener('scroll', this.onScroll() }
},
destroyed () {
window.removeEventListener('scroll', this.onScroll)
}
I prefer not to combine these components into one as it doesn't align with their nature, and also because I use compA in multiple places while compB is specific to one page. Additionally, the layout doesn't allow me to make compB a child of compA as suggested in comments.
Any suggestions would be appreciated.