Having strange issue with my tabs in a Vue app.
I have three tabs.
When Im logged I want to see all 3 tabs.
If Im logged out I only want to see 1 tab.
So I put some logic inside 2 of the tab buttons like this:
<ion-tab-button v-if="auth" tab="profile">
<ion-label>Profile</ion-label>
</ion-tab-button>
I get the auth value from a vuex store getter.
If auth is true then it shows tab. This works fine in that when I’m logged out it hides the tabs and when I’m logged in it shows them. The problem is when I click on these tabs (the ones with the v-if logic) when logged in. When I click on them the page appears completely blank - everything goes - tabs and content - nothing is showing.
The funny thing is the elements are actually still there on the page behind this white wall! - I can hover over the area where I know the buttons etc should be and I can click on them - its just that nothing is on the screen. If I reload the browser even once then all the tabs work fine.
Im wondering if there is something else I can do to fix this issue!!?
A better way to conditionally hide tabs if logged in/not logged in etc?
One thing I tried that worked was I switched from hash to history mode in the router. Everything works fine then! However I dont want to do this as the app is deployed to github pages and to get github pages to work with history mode is a pain.