Ad

Swiper Not Working With Dynamic Data In Framework7 With Vue.js

- 1 answer

I am using Framework7 swiper in my app. When I use static data then swiper works fine but it is not working when I fetch the data from the server using web service. I have used DOM to update swiper but unfortunately, it is not updated. Please give me the solution to update the swiper.

My code is:

<script>
export default {
    data() {
        return {
            posts: [],
        }
    },

    methods: {
        onF7Init:function() {
            this.theater();   
        },

        // function of fetch the data from serve:
        theater: function() {
            // fetch images path from server
            axios.get(`https://api.themoviedb.org/3/discover/movie?api_key={api_key}&primary_release_date.gte=2018-02-1&primary_release_date.lte=2018-02-21`)
                .then(response => {
                    current.**posts** = response.data.results;

                //I added this line to update the swiper:
                $$(this).find('#banner-swiper')[0].swiper.update();
            })
        }
    }
}
</script>

I added this line to update the swiper:

$$(this).find('#banner-swiper')[0].swiper.update()

My app template:

<f7-swiper pagination id="banner-swiper">

    <f7-swiper-slide  v-for="
     (post,index) in posts" :key="index" >              

         <img :src="'https://image.tmdb.org/t/p/w500' + 
            post.backdrop_path"/>
    </f7-swiper-slide>
</f7-swiper>
Ad

Answer

You can try the following code to update your swiper.

this.$$(".swiper-container")[0].swiper.update();

If you are using more than 1 swiper in a single page then you can replace [0] with the index of your swiper or you can use Framework7 API to update your Swiper.

let swiper = this.$f7.swiper.get(".banner-swiper");
swiper.$el[0].swiper.update();

Both the solutions are working for me.

Ad
source: stackoverflow.com
Ad