0

Vue version: 3

Swiper version: 6

I'm using Swiper dependency with Vuejs and I can't access Swiper instance before mount when I do this:

<div class="slide-discription" v-for="(title, i) in homeData.titles"
    :key="title" 
  >
    <h1 v-if="getSlideTitle(i)" >{{ title }}</h1> 
</div>

and here is my script tag:

<script>

import { Swiper, SwiperSlide } from 'swiper/vue'
import SwiperCore, { Navigation, Pagination, A11y } from 'swiper';
  
import 'swiper/swiper-bundle.min.css'
import 'swiper/swiper.min.css'

SwiperCore.use([Navigation, Pagination, A11y]);


  export default {
    components: {
      Swiper,
      SwiperSlide,
      
    },
    data() {

      return {
        swiper: null,
        swiperOption: {
          notNextTick: true,
          setWrapperSize :true,
          autoHeight: true,
        },
        homeData: {
          picsSrc: ['1.jpg', '2.jpeg', '3.jpg', '4.jpeg', '5.jpeg'],
          titles: [
            . . .
            //some titles
            . . .
          ],
        },
      }
    },

    methods: {
      onSwiper(swiper) {
      this.swiper = swiper;
    },
     getSlideTitle(index) {
        if (this.swiper.activeIndex == [index]) return true 
        else return false
      },
    },


    setup() {
      return {
        modules: [Navigation, Pagination, A11y],
      };
    },
  };
</script>

what I want to do here is changing the slide title depending on the slide displayed ( using .activeindex property) my question is: is there any possible way to defined swiper even before the website mounted

amin bahaddi
  • 3
  • 3
  • This is XY problem. If some data depends on another data that is not available, don't render it until it's available. – Estus Flask Aug 23 '22 at 10:21

1 Answers1

0

You can simply use conditional rendering:

<div
  v-if="swiper" // add this
  v-for="(title, i) in homeData.titles"
  class="slide-discription"
  :key="title" 
>...
paddotk
  • 1,359
  • 17
  • 31