vuejs slick 不适用于 v-for答案

【问题标题】：vuejs slick is not working with v-forvuejs slick 不适用于 v-for
【发布时间】：2018-03-11 06:30:06
【问题描述】：

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

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 am trying to loop through playlists of user.slick is not working. 你在哪里尝试循环播放列表？
它在模板中。
什么时候打电话给getUserPlaylists？如果不调用，那么user_playlists是一个空数组。
这是另一个组件的子组件，在 profileData 的监视下，它将被调用。我忘了在顶部添加道具：['profileData']。还是不行。
没有为 v-for 元素 vuejs.org/v2/guide/list.html#key 提供唯一键可能是个问题。但“它不起作用”也可能意味着很多事情。究竟是什么没有按预期发生？

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

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

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

也许这会对你有所帮助。

【讨论】：

可以确认Oleksii.B的解决方案完美运行
这个解决方案 + 添加 :key (vuejs.org/v2/guide/list.html#key) 对我有用。
这个包应该允许你在 Vue 生命周期内你想要的地方初始化 slick。感谢此解决方案有效。
谢谢，我开始在这上面浪费一些时间，然后找到了你的答案。现在它的工作。
它对我有用（在观察者中进行销毁和创建），但我有多个幻灯片（其中我一次显示一个，取决于一个道具），所以我必须分配不同的参考，并为每个参考做同样的事情

【解决方案2】：

您只需等待数据加载完毕。您可以在 slick 组件上使用：

user_playlists.length > 0

【讨论】：

【解决方案3】：

简单的解决方案是使用v-if

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

【讨论】：

谢谢，但在那之后就没有刷卡了。我正在使用计算属性来绑定幻灯片列表。如果我动态更新列表，它就会损坏。我的意思是解决方案并不像你提到的那样简单。
@YasinYörük 我不明白您所面临的确切问题，我的解决方案解决了最初图片数组为空且不添加图片时的问题，v-if 所做的是仅当存在包含某些内容的数组时才会呈现图片。
其实你是对的。比方说，如果数组在第一个状态是空的，它就可以工作。但是数组动态填充它已损坏。
@YasinYörük 你说的损坏是什么意思？
嗨，很抱歉我的回复晚了。好的，让我一步一步解释。让我们想象一下，我们在第一个状态有一个空数组列表。 v-if 指令运行良好，页面上没有显示光滑的轮播。页面上有一个按钮，用于将这个空数组逐一填充。所以每次点击都会将一个项目推入数组。在此操作之后，会出现光滑的轮播，但不会滑动。我的意思是我不能在轮播中的项目之间滑动。我认为我们需要重新渲染这个组件，但我没有找到适合我的问题的解决方案。所以我决定使用另一个组件。