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

Question

element-ui 项目 npm install vue-awesome-swiper --save 安装

鼠标拖动可以，点击向左向右都无效

index.vue

<template>
  <el-container class="xl-container" direction="vertical">
    <div class="actor-box">
      <h3>国内明星</h3>
      <swiper :auto-update="true" class="actor-list"  :options="swiperOption">
        <swiper-slide class="channel" v-for="(vo,key) in list" :key="key">
          <div class="channel-info">
            <el-image :src="vo.actor_pic" class="actor-img">
              <div slot="placeholder" class="image-slot"> 加载中<span class="dot">...</span> </div>
            </el-image>
            <p class="actor-name">{{vo.actor_name}}</p>
            <p class="actor-hits">人气：{{vo.actor_hits}}</p>
          </div>
          <div class="channel-bottom">
            <el-button class="but" size="mini" type="success">收藏</el-button>
          </div>
        </swiper-slide>
        <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
      </swiper>
      
      <el-divider></el-divider>
    </div>
      </el-container>
</template>
<script>
 
export default {
  name: 'index',
  data()
  {
      return {
          post:{'type':'all','order':'desc','num':12,'by':'time'},
          list:[],
          swiperOption: {    
            observer:true,
            slidesPerView : 'auto',
            centeredSlidesBounds: true,
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev'
            },
        }
 　　　　　
      }
  },
  mounted() 
  { 
     let _this = this;
     _this.rq.post('/api/api.php/App_Actor',_this.post).then(res=>{
        _this.list = res.list
    })  
  },
  computed: {
      
  },
  methods: { 
     
 
  },
  watch: {
      
  }
  
}
</script>
<style  scoped>
 


</style>

Answer 1

以上答案都不是！

已经解决了，这是 swiper官方在vue设的坑 ，左右按钮必须自己绑定事件！我用的是 swiper6.x版本
解决方法是：

 <swiper ref="hits" :auto-update="true" class="actor-list" :options="swiperOption" >...</swiper> 
 
 <button class="button-prev" @click="prev"></button> 
 <button class="button-next" @click="next"></button>
 

js:

 mounted() 
 {
    prev(){
        this.$refs.hits.$swiper.slidePrev();
    },
    next(){
        this.$refs.hits.$swiper.slideNext();
    }
 }