First time here and I want to say that I really enjoy using F7 Vue and it saved us plenty of time to publish our cordova apps, thanks.
I’m facing an issue with a side panel (right). My panel is inside a page, which is in a tab view.
If my panel is opened and I change the current page/route, I want to close that panel but when I come back to the page, the backdrop isn’t hidden and the event
panel:open isn’t called anymore (vue-inspector).
My current workaround :
Using a timeout to let the panel close before doing something else.
However, if the user clicks on another tab, I can’t really add my timeout before switching the route.
I’m using this setup from @nolimits4web
Do my panels have to be inside the route page and can’t be in only one page ?
Well, this is what is not really supported:
By design panels must be the children of the app root element.
Maybe you can setup a small JSFiddle with isolated issue so i can see for a workaround?
Sure, thanks for looking at it, here is the fiddle : https://jsfiddle.net/2f87p02q/30/
Click open in TAB1, switch to TAB2 and go back to TAB1.
In this example, I could hide the backdrop manually but in my project, the event itself isn’t called anymore.
Here is the workaround, check the
beforeDestroy hook on that tab component https://jsfiddle.net/prz2xb0L/
Thank you very much !
I tried to use beforeDestroy but with this code
Your workaround is working, and thanks for your reactivity
this.$f7.panel.close(false); should work, but there is a bug i found there, so we call core panel method instead