Получить объект swiper, когда слайдер появляется через v-if

Question

У меня на странице есть слайдер swiper, в который я вывожу карты полученные с бека. До того как карты придут я показываю loader с помощью v-if, а на v-else ставлю сам слайдер с картами. Также мне нужно получить объект swiper, в котором хранятся все параметры (индекс активного слайда и так далее). Его получить легко использовав:

computed: {
  swiper() {
    return this.$refs.mySwiper.$swiper;
  }
}

Теперь выводим объект swiper:

mounted() {
  console.log(this.swiper);
}

Но я использую loader с v-if и слайдер с v-else, и возможно поэтому у меня this.$refs пустое и соответственно this.$refs.mySwiper - undefined. Кто ни будь сталкивался с таким? Есть решение?

Вот песочница, там я эмулирую загрузку. Если убрать v-if v-else на слайдере то this.$refs.mySwiper то что нужно. https://codesandbox.io/s/recursing-wilbur-bx3q2?file=/src/components/slider.vue

Answer 1

Используй v-show на элементе со слайдером

<template>
  <div>
    <main class="main">
      <section class="cards">
        <h1 class="cards__title">Cards</h1>
        <p v-if="isLoading">emulate loading...</p>
        <swiper v-show="!isLoading" ref="mySwiper" :options="swiperOptions">
          <swiper-slide>1</swiper-slide>
          <swiper-slide>2</swiper-slide>
          <swiper-slide>3</swiper-slide>
          <swiper-slide>4</swiper-slide>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </section>
    </main>
  </div>
</template>

Answer 2

Решить эту проблему можно двумя способами:

Как уже написали до меня: использовать v-show на слайдере.
С помощью проверки this.$refs.mySwiper.$swiper на undefined (позволяет использовать v-if v-else):

Я точно также получаю swiper:

computed: {
  swiper() {
    return this.$refs.mySwiper.$swiper;
  }
}

В моем случае мне надо было узнать index активного слайда, поэтому в swiperOptions прописываю событие на transitionEnd где и проверяю this.$refs.mySwiper.$swiper на undefined:

on: {
  transitionEnd: () => {
    if (this.$refs.mySwiper.$swiper !== undefined) {
      this.cardCurrentIndex = this.$refs.mySwiper.$swiper.realIndex;
    }
  }
}

Таким образом после загрузки карт с бека переменная isLoading = false. Дальше loader с v-if="isLoading" исчезает и появляется слайдер с v-else. После чего и срабатывает событие transitionEnd где this.$refs.mySwiper.$swiper уже неравно undefined.

БЛОГ НА HUSL

Получить объект swiper, когда слайдер появляется через v-if

Ответы (2 шт):