Multiple swipers issue

Questions
1

Hello Friends
My F7Vue app uses multiple swipers – one on ‘matches’ page, the other on ‘standings’ page. Both pages are watching the same season_id (from store) and load data accordingly once its value changes. The problem I am experiencing is that whenever the season value is being changed, only one swiper loads correctly - usually the one on the active page (both pages share same season selector). The faulty swiper on the other page does create the appropriate slides, but it’s interactivity features are disabled - the navigation buttons do not switch slides, the swiping action ‘drags’ the slides but does not ‘switch’ them. Did anyone experience similar issue whenever multiple swipers need to be updated at the same time? Is there a way to troubleshoot this? The swiper is an amazing feat and it is critical to the functionality of my app. Thanks in advance!

2

Can you provide us with some of your code?

3

Certainly;
both pages are nearly identical and very simple. Both are driven by useStore(‘usSeasonDivisions’), which re-load is triggered via button on #selecteseason-popup. There are no issues with the store - data loads properly, so only showing the code of the vue pages that issue is present. Issue also persists when I replace the <division-standings-slide> component with simple html, so issue is not in the child component. Also, it is worthwhile mentioning that when I choose the season on the Standings page, the Schedules swiper has issues, however when i go to Schedules page and change the season there, the reload fixes the broken swiper and both pages are fine. No console errors. The app is based on cordova template and issues are in dev mode (no build yet so cannot confirm if the issue persists there). Here’s the code:

standings.vue

<template>
  <f7-page name="standings">
    <navbar-top />
    <f7-block><f7-button fill popup-open="#selectseason-popup">SELECT SEASON</f7-button></f7-block>
    <f7-swiper navigation>
      <template v-if="divisions">
        <f7-swiper-slide v-for="division in divisions" v-bind:key="'st_' + division.id">  
          <division-standings-slide :division="division" />
        </f7-swiper-slide>
      </template>
    </f7-swiper>
  </f7-page>
</template>

<script>
  import { useStore } from 'framework7-vue';
  import NavbarTop from '@/components/navbar-top.vue';
  import DivisionStandingsSlide from '@/components/division-standings-slide.vue'
  export default {
    name: 'StandingsOverview',
    data() {
      return {
        state_loaded_divisions: useStore('loadedUsSeasonDivisions'),
        divisions: useStore('usSeasonDivisions'),
      }
    },
    components: {
      NavbarTop,
      DivisionStandingsSlide,
    }
  }
</script>

and - schedules.vue

<template>
  <f7-page name="schedules">
    <navbar-top />
    <f7-block><f7-button fill popup-open="#selectseason-popup">SELECT SEASON</f7-button></f7-block>
    <f7-swiper navigation>
      <template v-if="divisions">
        <f7-swiper-slide v-for="division in divisions" v-bind:key="'sc_' + division.id">  
          <division-schedules-slide :division="division" />
        </f7-swiper-slide>
      </template>
    </f7-swiper>
  </f7-page>
</template>

<script>
  import { useStore } from 'framework7-vue';
  import NavbarTop from '@/components/navbar-top.vue';
  import DivisionSchedulesSlide from '@/components/division-schedules-slide.vue'
  export default {
    name: 'ScheduleOverview',
    data() {
      return {
        state_loaded_divisions: useStore('loadedUsSeasonDivisions'),
        divisions: useStore('usSeasonDivisions'),
      }
    },
    components: {
      NavbarTop,
      DivisionSchedulesSlide,
    }
  }
</script>
4

Would be great to see minimal live example (e.g. in CodeSandbox), but first thing I see to improve is to wrap the whole slider with v-if rather than slides, as anyway there is no much sense to render Swiper without slides:

instead of this:

<f7-swiper navigation>
      <template v-if="divisions">
        <f7-swiper-slide v-for="division in divisions" v-bind:key="'sc_' + division.id">  
          <division-schedules-slide :division="division" />
        </f7-swiper-slide>
      </template>
    </f7-swiper>

do this:


<f7-swiper navigation v-if="divisions">      
  <f7-swiper-slide v-for="division in divisions" v-bind:key="'sc_' + division.id">  
    <division-schedules-slide :division="division" />
  </f7-swiper-slide>
</f7-swiper>
5

Would a link to the hosted dev suffice? http://wp.filipwolak.com:3000/
Multiple sliders there, but the one in question is on the schedules and standings page. Choose a season on Standings page and go to Schedules to see the faulty swiper.
Thanks

6

ok, try to enable observer and observeParents Swiper parameters

1 Like
7

Yes! That solved the issue. I added both of the parameters on both of the sliders. Thank you very much for your help