vuejs slick 不适用于 v-for [英] vuejs slick is not working with v-for

问题描述

vue-slick 可以很好地处理静态内容.但是当我试图循环播放 user.slick 的播放列表时，它不起作用.

vue-slick is working fine with static content. But when I am trying to loop through playlists of user.slick is not working.

html部分:

<template>
    <slick ref="slickone" :options="slickOptions">
        <div v-for='playlist in user_playlists'>
            <a href="#">
                <img :src="playlist.image">
                <p>Playlist Name</p>
            </a>
        </div>


    </slick>
</template>

脚本部分:

<script>
    import Slick from 'vue-slick';
    import './node_modules/slick-carousel/slick/slick.css';
    import './node_modules/slick-carousel/slick/slick-theme.css';
    export default {
        data() {
            return {
                user_playlists: [],
                slickOptions: {
                    infinite: true,
                    slidesToShow: 5,
                    slidesToScroll: 1,
                    autoplaySpeed: 5e3,
                },
            };
        },
        methods: {
            getUserPlaylists() {
                this.$http.get('api/user_playlists/user-playlists')
                        .then(response => {
                            this.user_playlists = response.body.data;
                            this.$refs.slickone.reSlick();
                        });
            },
            updated() {
                this.reInit();
            },
            reInit() {
                this.$refs.slickone.reSlick();
            },
        },
        components: {
            'slick': Slick,
        },
        watch: {
            profileData() {
                this.getUserPlaylists();
            },
            user_playlists() {
                this.reInit();
            }
        }
    }
</script>

我检查了文档并使用了 this.$ref.slickone.reSlick() 但它仍然无法正常工作.

I have checked the documentation and used this.$ref.slickone.reSlick() but still it's not working.

推荐答案

我也有类似的问题，但是我只更新了一次状态.对我来说解决方案是:

I have a similar problem, but I update the state only once. For me solution is:

    beforeUpdate() {
        if (this.$refs.slick) {
            this.$refs.slick.destroy();
        }
    },
    updated() {
        this.$nextTick(function () {
            if (this.$refs.slick) {
                this.$refs.slick.create(this.slickOptions);
            }
        });
    },

也许这会对你有所帮助.

Maybe this will help you.

这篇关于vuejs slick 不适用于 v-for的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！