Vue.js 中使用 Swiper.js 控制滑块时遇到的 undefined 错误?

Z时代
2024-03-01
分类：IT

<script lang="ts">
import { Vue, Component, Ref } from 'vue-property-decorator'
@Component({
    name: 'DetailPage',
})
export default class DetailPage extends Vue {
    @Ref('swiperTop') private swiperTop!: any;
    @Ref('swiperThumbs') private swiperThumbs!: any;
 swiperOptionTop :any= {
        loop: true,
        loopedSlides: 8, // looped slides should be the same
        spaceBetween: 10,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
        }
    }
     swiperOptionThumbs = {
        loop: true,
        loopedSlides: 8, // looped slides should be the same
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        slideToClickedSlide: true
    }
    mounted() {
        this.$nextTick(() => {
            const swiperTop = this.$refs.swiperTop.swiper
            const swiperThumbs = this.$refs.swiperThumbs.swiper
            console.log(this.$refs)
            swiperTop.controller.control = swiperThumbs
            swiperThumbs.controller.control = swiperTop
        })
    }
}
</script>
const swiperTop = this.$refs.swiperTop.swiper
            const swiperThumbs = this.$refs.swiperThumbs.swiper说没有被定义是怎么回事