vue.js - Swiper 无法使用 vue.js 处理 Framework7 中的动态数据

Question

我在我的应用程序中使用 Framework7 swiper。当我使用静态数据时，swiper 工作正常，但当我使用 Web 服务从服务器获取数据时，它无法工作。 我已经使用 DOM 来更新 swiper 但不幸的是，它没有更新。请给我更新刷卡器的解决方案。

我的代码是:

<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>

我添加了这一行来更新刷卡器:

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

我的应用程序模板:

<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>

Answer 1

您可以尝试使用以下代码来更新您的swiper。

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

如果您在单个页面中使用超过 1 个 swiper，则可以将 [0] 替换为 swiper 的索引，或者您可以使用Framework7 API来更新您的Swiper。

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

这两种解决方案都适合我。