I have several popups at the root of my app.
<f7-login-screen :opened="showLoginPopup" @popup:open="loginPopupVisible = true" @popup:closed="loginPopupVisible = false"> <f7-view v-if="loginPopupVisible" name="login" url="/login-signup/" /> </f7-login-screen>
Since these popups will rarely be used, I want the view inside it to not be rendered when it is not necessary.
So I have conditions for when the popup should be opened, and I switch a “isVisible” flag when popup start opening and finish closing. And I only render the content of the popup when the popup is visible.
My issue is: if the popup starts opened, there is no animation (which is cool) but the events “open” (and “opened”) are not fire! So my “isVisible” flag is not initialized.
Is it the expected behavior? If so, how can I access the “visible” state of the popup?