How to tell when the Swiper component is fully loaded and refresh it?

Hello,

I am population a swiper-slide with data from firebase. But I’m noticing that I can’t slide them, even though they render just fine.

<f7-swiper-slide v-for="(todo, index) in todos" :key="index">...</f7-swiper-slide>

Also I would like to do some more manipulation on the content once the swiper is fully loaded.

I can get it with this.$f7.swiper.get() But I guess I would like to check when is fully loaded with content

I’m using latest Framewrok7 + Vue.

Any ideas?

1 Like

First of all render Swiper when your slides data is there to get correct initialization, e.g.:

<f7-swiper v-if="todos && todos.length">
...
</f7-swiper>

It will be fully loaded as soon as its component mounted, you can get its instance by ref:

<f7-swiper ref="mySwiper">
this.$refs.mySwiper.swiper
1 Like

Im my application im doing something like

mounted() {
  this.$f7ready(() => {
    this.getTodo();
  })
},

methods: {
      getTodo() {
        Firebase.database().ref('todo').on('value', (resp) => {
          this.todos = resp.val();
        });
      },
  },
...

where in the application do I check for this.$refs.mySwiper.swiper ?

If I check for it inside after I get the firebase results, the swiper will be undefined because its not mounted yet.

In this case I need something along the lines of: if the slider is mounted ..

Any ideas?

1 Like
Firebase.database().ref('todo').on('value', (resp) => {
  this.todos = resp.val();
  this.$nextTick(() => {
    // access swiper here
  })
});

I see

app.utils.nextTick(callback, delay)- executes code after required delay. Basically alias for setTimeout

This approach seems to work, though i’d prefer if an event was dispatched when the element was mounted, or something along those lines.

Thank you.

Not that one, Vue has own nextTick https://vuejs.org/v2/api/#Vue-nextTick

If you check Swiper API, it has events, you can basically pass it in swiper params like:

<f7-swiper :params=“{ on: { init: yourHandler } }”

Nice…

Thank you.