Question

因此，我尝试使用vue-slick制作轮播。问题是当我这样做时：

<template>
    <slick ref="slick">
        <ul class="row no-padding" id="slick-carousel">
            <li class="col-4" v-for="data in responseData" :key="data.id">
                <project-tile :project="data"></project-tile>
            </li>
        </ul>
    </slick>
</template>

<script>
import Slick from 'vue-slick';
import { formBus } from './../../main.js';
import ProjectTile from './../projectTile/ProjectTile.vue';

export default {
    data() {
        return {
            responseData: []
        }
    },
    created() {
        formBus.$on('fetchData', data => {
            this.responseData = data;
        })
    },
    components: {
        projectTile: ProjectTile,
        Slick
    }
}
</script>

它不起作用。仅当我使用v-for列出列表时，才会出现此问题。任何解决方案我应该怎么做才能正确使用vue-slick ???

Answer 1

您只需要等待数据加载即可。您可以在光滑的组件上使用：

responseData.length > 0

如何在v-for中使用vue-slick？

1 个答案: