[SOLVED] [V2] F7 Vue - Panel Close

Questions
1

Hello !

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 ?

2

Well, this is what is not really supported:

By design panels must be the children of the app root element.

3

Maybe you can setup a small JSFiddle with isolated issue so i can see for a workaround?

4

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.

5

Here is the workaround, check the beforeDestroy hook on that tab component https://jsfiddle.net/prz2xb0L/

6

Thank you very much !
I tried to use beforeDestroy but with this code this.$f7.panel.close(false);
Your workaround is working, and thanks for your reactivity :smile:

7

Yeah, actually this.$f7.panel.close(false); should work, but there is a bug i found there, so we call core panel method instead