New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tabs Component broken after loading data via Axios #290

Closed
Jaspur opened this Issue Dec 12, 2017 · 4 comments

Comments

Projects
None yet
3 participants
@Jaspur

Jaspur commented Dec 12, 2017

I have a Components build with <f7-tabs>:
Like this:

<f7-tabs swipable>
  <f7-tab id="tab1" active>Tab 1 content...</f7-tab>
  <f7-tab id="tab2">Tab 2 content...</f7-tab>
</f7-tabs>

This all works; swiping and clicking to go to a Tab.
But when I load some data via Axios to the Tabs (forms etc.), the Swiping functionality keeps existing, but clicking on a Tab only result in an active state of the color of the link, but it doesn't go to the Tab itself. It all does work when I don't load any data in from my API via Axios... What's wrong? Tabs need to be re-rendered after loading data? If so; how? If not; any idea what's causing this?

@stefblokdijk

This comment has been minimized.

Show comment
Hide comment
@stefblokdijk

stefblokdijk Dec 31, 2017

I'm experiencing the same error, did you find any solution @Jaspur ? When I switch from route and go back to the same route later (which creates a new component of the same page), the tabs are not moving and nothing animates inside of the tab when clicking on the navbar link that would show the tab

stefblokdijk commented Dec 31, 2017

I'm experiencing the same error, did you find any solution @Jaspur ? When I switch from route and go back to the same route later (which creates a new component of the same page), the tabs are not moving and nothing animates inside of the tab when clicking on the navbar link that would show the tab

@Jaspur

This comment has been minimized.

Show comment
Hide comment
@Jaspur

Jaspur Dec 31, 2017

Jaspur commented Dec 31, 2017

@stefblokdijk

This comment has been minimized.

Show comment
Hide comment
@stefblokdijk

stefblokdijk Jan 7, 2018

Yes that was right! Eventually I found out that when you go back to page 1 again, it will create a new component. So the id's are duplicated automatically.

I fixed it by adding dom-cache to my . That way it doesn't create 2 page components

stefblokdijk commented Jan 7, 2018

Yes that was right! Eventually I found out that when you go back to page 1 again, it will create a new component. So the id's are duplicated automatically.

I fixed it by adding dom-cache to my . That way it doesn't create 2 page components

@nolimits4web

This comment has been minimized.

Show comment
Hide comment
@nolimits4web

nolimits4web Jan 30, 2018

Member

Closing as looks like resolved

Member

nolimits4web commented Jan 30, 2018

Closing as looks like resolved

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment