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.
If you check Swiper API, it has events, you can basically pass it in swiper params like:
<f7-swiper :params=“{ on: { init: yourHandler } }”