安装前访问“Swiper”

Question

Vue版本:3

刷卡版本:6

我在Vuejs中使用Swiper依赖项，当我这样做时，我无法在挂载之前访问Swiper实例：

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

这是我的脚本标签：

<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>

我在这里要做的是根据显示的幻灯片(使用.activeindex属性)更改幻灯片标题，我的问题是:是否有可能在网站挂载之前就定义what？

Answer 1

您可以简单地使用条件呈现：

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