Tabs not changing when pressing Toolbar links after routing

stefblokdijk commented 6 years ago

When i'm on an page of my app, I can swipe and hit the toolbar links to change from tab. As soon as I change the route (going to another page and coming back to the same page) the swiping is still working but I have the following issue's:

I can't hit the toolbar links to change from tab
Every animation/moving part of the app is frozen but the actions do happen in the background (contacting the api when a component is done spinning)

You can see the first part happen in this video: https://youtu.be/JWVEUBMEjOc This issue also happened for this user: https://github.com/framework7io/framework7-vue/issues/290

This is the used code:

Page that was shown first in the video

<f7-page name="offers">
        <f7-navbar sliding no-shadow>
            <f7-nav-left>
                <f7-link icon="icon-bars" open-panel="left"></f7-link>
            </f7-nav-left>
            <f7-nav-center></f7-nav-center>
            <f7-nav-right>
                <div class="nav-balance">
                    Balance:
                </div>
                <div class="nav-points">
                    {{ points }}
                </div>
            </f7-nav-right>
        </f7-navbar>

        <f7-toolbar tabbar noShadow>
            <f7-link tab-link="#offers" active>Offers</f7-link>
            <f7-link tab-link="#fortuneWheel">Fortune Wheel</f7-link>
            <f7-link tab-link="#rewards">Rewards</f7-link>
        </f7-toolbar>

        <f7-tabs swipeable>
            <f7-page-content tab id="offers" @tab:show="tabChanged('offers')" active>
                <offers-tab :active-tab="active_tab"></offers-tab>
            </f7-page-content>

            <f7-page-content tab id="fortuneWheel" @tab:show="tabChanged('fortuneWheel')">
                <fortune-wheel-tab :active-tab="active_tab"></fortune-wheel-tab>
            </f7-page-content>

            <f7-page-content tab id="rewards" @tab:show="tabChanged('rewards')">
                <rewards-tab :active-tab="active_tab"></rewards-tab>
            </f7-page-content>
        </f7-tabs>

    </f7-page>

If any code is needed to fix the issue, let me know

versions used:

framework7: "1.6.5"
framework7-vue: "0.9.4"
vue: "2.5.13"

stefblokdijk commented 6 years ago

Anyone reading this, I eventually fixed the issue. I found out that the tab id's were duplicating when you do this: 1.) Go to page 1 (lets call it home 2.) Go to page 2 3.) Go back to home

This action would create 2 vue components when using routing as you can see below When I changed tabs via navigation on the second page, it actually updated the navigation on that page, but it didn't show the right tab. That happend on the background in the first mounted page.

Eventually I fixed this by adding dom-cache on my main <f7-view>. When I do the same action as explained above, it will remove the first vue component and the issue with the tabs is fixed:

nolimits4web commented 6 years ago

Situtation should be improved in v2

Jaspur commented 6 years ago

@nolimits4web what's the fix for it so I can make it backward compatible for v1 without having to migrate to v2?

framework7io / framework7-vue

Tabs not changing when pressing Toolbar links after routing #302