vuejs slick이 v-for와 함께 작동하지 않습니다.

vuejs slick이 v-for와 함께 작동하지 않습니다.

vue-module은 스태틱콘텐츠에서 정상적으로 동작하고 있습니다.하지만 사용자의 플레이리스트를 루프하려고 할 때.슬릭이 작동하지 않습니다.

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()그래도 안 되네.

저도 비슷한 문제가 있지만 상태를 한 번만 업데이트합니다.솔루션으로는 다음과 같습니다.

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

아마 이게 도움이 될 거야

데이터가 로드될 때까지 기다리면 됩니다.slick 컴포넌트에서 사용할 수 있습니다.

user_playlists.length > 0

간단한 해결방법은v-if

<slick ref="slick" :options="slickOptions" v-if="user_playlists.length">

언급URL : https://stackoverflow.com/questions/46487333/vuejs-slick-is-not-working-with-v-for