Goal: Dynamically add a swipeable tab + tab content.
Part that works: Dynamically adding tab links to the NAVBAR.
Part that fails: Dynamically adding tabs (the content).
What I’ve noticed: The dynamically added tabs (content) do NOT have the
.swiper-slide classes applied to them, leading me to believe that the “swipeable” part of the tab generation process does not get re-triggered.
What I’ve tried:
Adding the class
.swiper-slidemanually. This half-way works by making the content appear when the non-dynamic slide is slid left/right, but it does not allow the user to go all the way to the new slide. Sort of a ‘peek’, but not usable. Also, clicking on the tab-bar links for the newly-added tabs fails to go to the new tab content.
<f7-tabs>component that dynamically changes when the slide count changes. In theory this should re-create the entire component. Sadly, this makes the slider even worse: No more sliding at all, no swiper classes. Apparently this does NOT rebuild the swiper part. Perhaps it’s because the tabs all have the
.page-contentclass? I’m not sure, but it feels buggy.
Trying to find the swiper object so I can call .update() (see https://swiperjs.com/api/#methods). For some reason there is no
.swiperproperty of the
<f7-tabs>. I can select the swiper instance by doing
swiper = this.$f7.swiper.get(this.$$('.page-current .swiper-container')), but calling
swiper.update()on that does not re-trigger anything. (in fact, that function is “type undefined”, even though I can see it listed in the
My setup is the same as the sample tabs setup shown for Vue. The only addition being that i use a
v-for loop on the tabs, so there will be multiple tab content pages.
Does anyone have a solution for dynamically adding F7 Vue swipeable tabs?
Here’s the part of my template, in case it helps. The
Scopes variable is an array.
<f7-tabs swipeable ref="tabs" :key ="'scopes-length-'+Scopes.length"> <f7-tab v-for="scope in Scopes" :key ="scope.Scope" :id="'tab-'+scope.Scope" class="page-content" > <f7-block> <Scope :scope="scope" :minimal="false" style="position:relative;top:-3.5em;"></Scope> </f7-block> </f7-tab> </f7-tabs>