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

Question

<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说没有被定义是怎么回事

Answer 1

你遇到的问题是在尝试访问 $refs 的时候，swiperTop 和 swiperThumbs 未被定义。这通常发生在尝试访问 DOM 元素或子组件引用的时候，但在 DOM 元素或子组件还没有被渲染完成时。

在 Vue.js 中，$refs 是用来直接访问模板中的 DOM 元素或子组件实例的。但是，你不能在 mounted() 钩子函数中立即访问 $refs，因为在这个时候，Vue.js 可能还没有完成模板的渲染和子组件的挂载。这就是为什么你看到 swiperTop 和 swiperThumbs 是 undefined 的原因。

你可以通过使用 this.$nextTick() 来确保你的代码在 DOM 更新完成后再执行。这会延迟你的代码执行，直到 Vue.js 完成下一个 DOM 更新周期。

以下是你可以尝试的修复代码：

<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(() => {            if (this.swiperTop && this.swiperThumbs) {                const swiperTop = this.swiperTop.swiper;                const swiperThumbs = this.swiperThumbs.swiper;                console.log(this.$refs);                swiperTop.controller.control = swiperThumbs;                swiperThumbs.controller.control = swiperTop;            } else {                console.error('Swiper elements or refs are not available');            }        })    }}</script>

在这个修复的代码中，我们使用了 this.$nextTick() 来延迟我们的代码执行，并在访问 $refs 之前检查它们是否存在。如果 swiperTop 或 swiperThumbs 不存在，我们将在控制台中打印一个错误消息。