node.js - 为什么 vue js 中的 slick 会给出意外的视图？

Question

我正在尝试将每个 b 数组图像实现为一张幻灯片，但我得到第一张幻灯片，所有图像一个接一个，另一张幻灯片为空。我的代码有什么问题。现在调试了几个小时，但真的无法弄清楚。

我正在尝试将每个 b 数组图像实现为一张幻灯片，但我得到第一张幻灯片，所有图像一个接一个，另一张幻灯片为空。我的代码有什么问题。现在调试了几个小时，但真的无法弄清楚。

<template>
    <div >
        <slick ref="slick" :options="slickOptions" class="slick-b">
            <div
                v-for="(each_b, index) in b"
                :key="each_b.id"
                class="b"
            >
                <a
                    v-if="each_b.attributes.imageUrl.startsWith('http')"
                >
                    <img
                        v-if="index < 1"
                        :src="
                            getImage(
                                each_b.attributes.imageUrl +
                                    '?width=240&enforceAspectRatio=true'
                            )
                        "
                        :alt="each_b.attributes.title"
                    />
                    <img
                        v-else
                        :data-lazy="
                            getImage(
                                each_b.attributes.imageUrl +
                                    '?width=240&enforceAspectRatio=true'
                            )
                        "
                        :alt="each_b.attributes.title"
                    />
                </a>
                
            </div>
        </slick>
    </div>
</template>

<script>
import Slick from "vue-slick";
import inViewport from "vue-in-viewport-mixin";
import { mapGetters } from "vuex";
import mixins from "@/mixins";

export default {
    mixins: [mixins, inViewport],
    props: {
        b: {
            type: Array,
            required: true,
        },
        "in-viewport-once": {
            default: true,
        },
    },
    
    data() {
        var prev =
            '<div class="back-b-arrow"><i class="icons" aria-hidden="true">&#xe830;</i></div>';
        var next =
            '<div class="forward-b-arrow"><i class="icons" aria-hidden="true">&#xe803;</i></div>';
        var rtl_flag = false;
        return {
            slickOptions: {
                slidesToShow: 1,
                lazyLoad: "ondemand",
                infinite: false,
                adaptiveHeight: false,
                variableWidth: false,
                arrows: true,
                dots: false,
                draggable: true,
                edgeFriction: 0.3,
                swipe: true,
                rows: 0,
                autoplay: false,
                autoplaySpeed: 4000,
                prevArrow: prev,
                nextArrow: next,
                bTimer: "",
                rtl: rtl_flag,
            },
        };
    },
    created() {
        if (this.isMobile()) {
            this.slickOptions.prevArrow = null;
            this.slickOptions.nextArrow = null;
        }
    },
    watch: {
        "inViewport.now": function (visible) {
            
        },
    },
    mounted() {
        this.reInit();
        const that = this;
        this.bTimer = setTimeout(() => {
            this.slickOptions.autoplay = true;
            this.reInit();
        }, 9000);
    },
    destroyed() {
        clearTimeout(this.bTimer);
    },
    methods: {
        next() {
            this.$refs.slick.next();
        },
        prev() {
            this.$refs.slick.prev();
        },
        reInit() {
            // Helpful if you have to deal with v-for to update dynamic lists
            this.$refs.slick.reSlick();
        },
    },
    components: {
        Slick,
    },
};
</script>

标签： node.jsvue.jsfrontendslick.jsvuejs3