在vue中使用swiper时左右点击按钮失效

左右按钮须自己绑定事件 @click

<swiper ref="mySwiper" :options="swiperOptions">
  <swiper-slide
    :class="{swiperActive:item.id==midCourseID}"
    v-for="(item,index) in midCourse"
    :key="index"
    @click.native="getMidCourse(item)"
  >{{item.title}}</swiper-slide>
  <div class="swiper-button-prev" @click="prev"></div>
  <div class="swiper-button-next" @click="next"></div>
</swiper>

 data() {
    return {
      swiperOptions: {
        slidesPerView: "auto",
        pagination: {
          el: ".swiper-pagination",
        },
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  mounted() {
    this.swiper.slideTo(0, 1000, false);
  },
  methods:{
    prev() {
      this.swiper.slidePrev();
    },
    next() {
      this.swiper.slideNext();
    },
  }